/* Sivuston kehys (index.html:n mallista). Ei elementtitason nollauksia, jotta demon sisältö säilyy ennallaan. */
  body { margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; background: #FFFFFF; color: #1A1B1E; }
  .site { --accent: #3E6EA5; }
  .site a { text-decoration: none; }


  .site-nav { border-bottom: 1px solid #EDEDEF; }
  .site-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 18px 24px; box-sizing: border-box; }
  .site-logo { display: block; line-height: 0; }
  .site-logo img { height: 28px; width: auto; display: block; }
  .nav-links { display: flex; align-items: center; gap: 36px; }
  .nav-link { color: #4A4F57; font-weight: 600; font-size: 15px; }
  @media (max-width: 1100px) { .nav-links { gap: 18px !important; } .nav-link { font-size: 14px; } }
  /* Kokeile-sivun palkissa on lisäksi Kysy lisää -nappi ja haku (11.10.2026):
     etusivun kohtiin vievät Kannattavuus ja Integraatiot pois alle 1460 px:n leveydellä. */
  @media (max-width: 1460px) { .nav-link-uusi { display: none; } }
  @media (max-width: 1020px) { .nav-link-uusi { display: none; } }
  .nav-link:hover, .nav-link[aria-current="page"] { color: var(--accent); }
  .nav-right { display: flex; align-items: center; gap: 18px; }
  .btn-primary { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; background: var(--accent); color: #FFFFFF; font-weight: 700; border-radius: 10px; border: none; box-shadow: 0 1px 2px rgba(16,24,32,0.08), 0 8px 18px rgba(16,24,32,0.12); }
  .btn-primary:hover { filter: brightness(0.92); }
  @media (max-width: 880px) {
    .nav-links { display: none !important; }
  }
  @media (max-width: 560px) { .nav-login { display: none; } }

  .site-footer { background: #080808; padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.06); }
  .site-footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
  .site-footer-copy { font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; }
  .site-footer-nav { display: flex; flex-wrap: wrap; gap: 12px 32px; }
  .site-footer-nav a { font-size: 12px; color: rgba(255,255,255,0.6); text-decoration: none; }
  .site-footer-nav a:hover { color: rgba(255,255,255,0.9); }
  .site-footer-nav .ck-reopen { background: none; border: none; padding: 0; font-family: inherit; font-size: 12px; color: rgba(255,255,255,0.6); cursor: pointer; }
  .site-footer-nav .ck-reopen:hover { color: rgba(255,255,255,0.9); }

  /* Evästebanneri (sama kuin etusivulla) */
  .ck-banner { position: fixed; left: 24px; bottom: 24px; z-index: 9999; width: 360px; max-width: calc(100vw - 48px); box-sizing: border-box; background: #1A1B1E; color: rgba(255,255,255,0.86); border-radius: 14px; padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 14px; }
  .ck-title { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 16px; font-weight: 700; color: #FFFFFF; margin: 0; line-height: 1.12; }
  .ck-text { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.74); margin: 0; }
  .ck-text a { color: #9DBBE0; text-decoration: underline; }
  .ck-text a:hover { color: #C4D7EE; }
  .ck-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; min-height: 28px; font-family: inherit; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.74); cursor: pointer; text-align: left; }
  .ck-toggle:hover { color: #FFFFFF; }
  .ck-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ck-list { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); padding: 12px 0; }
  .ck-list[hidden] { display: none; }
  .ck-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; }
  .ck-name { font-family: 'IBM Plex Mono', ui-monospace, monospace; color: rgba(255,255,255,0.86); }
  .ck-desc { color: rgba(255,255,255,0.64); text-align: right; }
  .ck-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
  .ck-btn { min-height: 44px; border-radius: 9px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; background: #FFFFFF; color: #1A1B1E; border: 1px solid #FFFFFF; }
  .ck-btn:hover { background: #E8ECF2; }
  @media (max-width: 480px) { .ck-banner { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; } }

  /* ===== Demo (L:/ekirjuri-md/ekirjuri-demo-oikeat-nakymat.html), rajattu .ek-demo-kääreeseen ===== */
.ek-demo{
  --pg-bg:#FFFFFF; --pg-soft:#FAFAF6; --pg-text:#1A1B1E; --pg-muted:#5F636A; --pg-line:#E4E4E8; --accent:#3E6EA5;
  --c-bg:#FAF7F2; --c-surface:#FFFFFF; --c-surface2:#FAF7F2; --c-border:#E7E0D3; --c-border-m:#9C9485;
  --c-text:#241F19; --c-text2:#6B5E4C; --c-muted:#797166; --c-ink:#241F19; --c-ink-text:#FFFFFF;
  --c-accent:#4973A5; --c-on-accent:#FFFFFF; --c-accent-soft:rgba(73,115,165,.12); --c-danger:#A33323;
  --c-ok:#1B6E3C; --c-ok-bg:#E6F4EA; --c-ok-line:#BFE3CB;
  --c-bad-bg:#FCEBEA; --c-bad-line:#F3C4C0; --c-bad-text:#7A1710;
  --c-warn-bg:#FEF6E6; --c-warn-line:#F2DDB0;
  --b-luonnos-bg:#EEF1F5; --b-luonnos:#49586B; --b-lahetetty-bg:#E7F0FB; --b-lahetetty:#1D4E8F;
  --b-hyvaksytty-bg:#E6F4EA; --b-hyvaksytty:#1B6E3C; --b-hylatty-bg:#FCEBEA; --b-hylatty:#A33323;
  --b-avattu-bg:#EFEAF8; --b-avattu:#5A3D8C;
  --r-card:10px; --r-control:6px; --r-field:6px; --r-row:8px; --r-panel:8px;
  --ink:#1d7a40;
  --shadow:0 8px 24px rgba(36,31,25,.18);
}
@media (prefers-color-scheme:dark){.ek-demo:not([data-theme="light"]){
  --pg-bg:#141517; --pg-soft:#1B1C1F; --pg-text:#ECEDEF; --pg-muted:#A2A6AD; --pg-line:#2D2F33; --accent:#8FB3DC;
  --c-bg:#191512; --c-surface:#221D18; --c-surface2:#2A241E; --c-border:#3A322A; --c-border-m:#6A5E50;
  --c-text:#F2EDE5; --c-text2:#D2C7B6; --c-muted:#A89E90; --c-ink:#F2EDE5; --c-ink-text:#191512;
  --c-accent:#8FB3DC; --c-on-accent:#191512; --c-accent-soft:rgba(143,179,220,.16); --c-danger:#E88C7D;
  --c-ok:#9FD3A9; --c-ok-bg:#1F3325; --c-ok-line:#2E5236;
  --c-bad-bg:#3B211C; --c-bad-line:#5C3129; --c-bad-text:#F2C4BB;
  --c-warn-bg:#3A2A17; --c-warn-line:#5A4323;
  --b-luonnos-bg:#2B313A; --b-luonnos:#C3CEDC; --b-lahetetty-bg:#1D2C40; --b-lahetetty:#A9C8EE;
  --b-hyvaksytty-bg:#1F3325; --b-hyvaksytty:#9FD3A9; --b-hylatty-bg:#3B211C; --b-hylatty:#F0A696;
  --b-avattu-bg:#2E2640; --b-avattu:#CDB8F0;
  --ink:#7fd39a; --shadow:0 8px 24px rgba(0,0,0,.45);
}
}
.ek-demo[data-theme="dark"]{
  --pg-bg:#141517; --pg-soft:#1B1C1F; --pg-text:#ECEDEF; --pg-muted:#A2A6AD; --pg-line:#2D2F33; --accent:#8FB3DC;
  --c-bg:#191512; --c-surface:#221D18; --c-surface2:#2A241E; --c-border:#3A322A; --c-border-m:#6A5E50;
  --c-text:#F2EDE5; --c-text2:#D2C7B6; --c-muted:#A89E90; --c-ink:#F2EDE5; --c-ink-text:#191512;
  --c-accent:#8FB3DC; --c-on-accent:#191512; --c-accent-soft:rgba(143,179,220,.16); --c-danger:#E88C7D;
  --c-ok:#9FD3A9; --c-ok-bg:#1F3325; --c-ok-line:#2E5236;
  --c-bad-bg:#3B211C; --c-bad-line:#5C3129; --c-bad-text:#F2C4BB;
  --c-warn-bg:#3A2A17; --c-warn-line:#5A4323;
  --b-luonnos-bg:#2B313A; --b-luonnos:#C3CEDC; --b-lahetetty-bg:#1D2C40; --b-lahetetty:#A9C8EE;
  --b-hyvaksytty-bg:#1F3325; --b-hyvaksytty:#9FD3A9; --b-hylatty-bg:#3B211C; --b-hylatty:#F0A696;
  --b-avattu-bg:#2E2640; --b-avattu:#CDB8F0;
  --ink:#7fd39a; --shadow:0 8px 24px rgba(0,0,0,.45);
}
.ek-demo *,.ek-demo *::before,.ek-demo *::after{box-sizing:border-box}
.ek-demo [hidden]{display:none!important}
.ek-demo{scroll-padding-top:env(safe-area-inset-top,0px)}
.ek-demo{margin:0;background:var(--pg-bg);color:var(--pg-text);font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.55;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.ek-demo button,.ek-demo input,.ek-demo select,.ek-demo textarea{font:inherit;color:inherit}
.ek-demo :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ek-demo .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ek-demo .demo{max-width:1160px;margin:0 auto;padding:72px 24px 88px}
.ek-demo .intro{max-width:660px;margin-bottom:40px}
.ek-demo .intro h1{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:clamp(30px,4.4vw,44px);line-height:1.1;letter-spacing:-0.02em;margin:0 0 14px}
.ek-demo .intro p{margin:0;color:var(--pg-muted);font-size:17px;max-width:58ch}
.ek-demo .layout{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:40px;align-items:start}
.ek-demo .steps{list-style:none;margin:0;padding:0;position:sticky;top:24px;display:grid;gap:4px}
.ek-demo .step{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:10px 12px;border-radius:12px;background:none;border:0;text-align:left;width:100%;cursor:default}
.ek-demo .step[data-go]{cursor:pointer}
.ek-demo .step[data-go]:hover{background:var(--pg-soft)}
.ek-demo .step:disabled{color:var(--pg-muted)}
.ek-demo .step .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;border:1.5px solid var(--pg-line);color:var(--pg-muted);background:var(--pg-bg)}
.ek-demo .step .t{font-weight:600;font-size:15px;line-height:1.25;padding-top:2px}
.ek-demo .step .s{display:block;font-size:13px;color:var(--pg-muted);font-weight:400;margin-top:2px}
.ek-demo .step[aria-current="step"]{background:var(--pg-soft)}
.ek-demo .step[aria-current="step"] .n{background:var(--accent);border-color:var(--accent);color:#fff}
.ek-demo[data-theme="dark"] .step[aria-current="step"] .n{color:#141517}
@media (prefers-color-scheme:dark){.ek-demo:not([data-theme="light"]) .step[aria-current="step"] .n{color:#141517}
}
.ek-demo .step.done .n{background:var(--pg-bg);border-color:var(--accent);color:var(--accent)}
.ek-demo .step.done .n::after{content:"";width:10px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translate(1px,-1px)}
.ek-demo .step.done .n span{display:none}
.ek-demo .step.skip .t{text-decoration:line-through;text-decoration-thickness:1px}
.ek-demo .step:not(:last-child)::before{content:"";position:absolute;left:28px;top:46px;bottom:-8px;width:1.5px;background:var(--pg-line)}
.ek-demo .reset{margin:14px 0 0 12px;background:none;border:0;padding:6px 0;color:var(--pg-muted);font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ek-demo .reset:hover{color:var(--pg-text)}
.ek-demo .stage-head{margin:0 0 18px;max-width:64ch}
.ek-demo .role{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.3;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:7px 14px;border-radius:8px;margin-bottom:12px}
.ek-demo .stage-head h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:24px;line-height:1.2;margin:0 0 6px;letter-spacing:-0.01em}
.ek-demo .stage-head h2:focus{outline:none}
.ek-demo .stage-head p{margin:0;color:var(--pg-muted)}
.ek-demo .stage{display:none}
.ek-demo .stage.on{display:block;animation:ekd-in .35s ease both}
@keyframes ekd-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ek-demo .phone{width:100%;max-width:390px;border:10px solid #1d1b19;border-radius:38px;background:var(--c-bg);overflow:hidden;box-shadow:0 18px 50px rgba(16,24,32,.16)}
.ek-demo .phone-scroll{position:relative;max-height:780px;overflow-y:auto;overscroll-behavior:contain}
.ek-demo .desk{width:100%;border:1px solid var(--pg-line);border-radius:16px;background:var(--c-bg);overflow:hidden;box-shadow:0 18px 50px rgba(16,24,32,.10)}
.ek-demo .stage-row{display:grid;grid-template-columns:minmax(0,390px) minmax(0,1fr);gap:32px;align-items:start}
.ek-demo .stage-row--desk{grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:28px}
.ek-demo .aside{font-size:15px;color:var(--pg-muted);max-width:44ch;padding-top:8px}
.ek-demo .aside p + h3{margin-top:22px}
@media (min-width:901px){.ek-demo .stage-row > .aside{position:sticky;top:24px}}
.ek-demo .aside h3{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--pg-text);margin:0 0 8px}
.ek-demo .aside p{margin:0 0 14px}
.ek-demo .aside .rule{border-left:3px solid var(--accent);padding:2px 0 2px 12px;margin:0 0 14px;color:var(--pg-text)}
.ek-demo .aside-wide{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px 28px;font-size:15px;color:var(--pg-muted)}
.ek-demo .aside-wide h3{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--pg-text);margin:0 0 6px}
.ek-demo .aside-wide p{margin:0 0 12px}
.ek-demo .aside-wide .rule{border-left:3px solid var(--accent);padding:2px 0 2px 12px;color:var(--pg-text)}
.ek-demo .demo-nav{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ek-demo .demo-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 22px;line-height:1.4;text-align:center;border-radius:10px;border:0;background:var(--accent);color:#fff;font-weight:700;cursor:pointer;font-family:'IBM Plex Sans',system-ui,sans-serif}
.ek-demo[data-theme="dark"] .demo-btn{color:#141517}
@media (prefers-color-scheme:dark){.ek-demo:not([data-theme="light"]) .demo-btn{color:#141517}
}
.ek-demo .demo-note{font-size:13px;color:var(--pg-muted);font-family:'IBM Plex Sans',system-ui,sans-serif;border:1px dashed var(--pg-line);border-radius:10px;padding:8px 10px;margin:0 0 14px;background:var(--pg-bg)}
.ek-demo .app{font-family:'Work Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--c-text);font-size:16px;line-height:1.5;background:var(--c-bg)}
.ek-demo .app h1,.ek-demo .app h2,.ek-demo .app h3{font-family:inherit}
.ek-demo .ylapalkki{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:nowrap;min-height:60px;padding:8px 16px;background:var(--c-surface);border-bottom:1px solid var(--c-border)}
.ek-demo .logo-linkki{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:4px 8px 4px 6px;margin-left:-6px;min-width:0;flex:0 1 auto;border-radius:var(--r-control);color:var(--c-muted);line-height:0}
.ek-demo .logo-linkki svg{flex:0 0 auto}
.ek-demo .logo-linkki img{display:block;height:24px;width:auto;max-width:100%;min-width:0;object-fit:contain;object-position:left center}
.ek-demo .yritystunnus{display:inline-flex;align-items:center;flex:0 20 auto;min-width:0;height:32px;padding-left:12px;border-left:1px solid var(--c-border);line-height:0}
.ek-demo .yritystunnus__nimi{display:block;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;line-height:1.2;color:var(--c-text)}
.ek-demo .phone .logo-linkki img{height:20px}
.ek-demo .phone .yritystunnus{height:28px;padding-left:10px}
.ek-demo .phone .yritystunnus__nimi{max-width:110px;font-size:13px}
.ek-demo .kv-wrap{flex:0 0 auto;margin-left:auto}
.ek-demo .kv-nappi{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--c-border-m);border-radius:50%;background:var(--c-surface);color:var(--c-text);font-size:15px;font-weight:500;letter-spacing:.02em;line-height:1;cursor:pointer}
.ek-demo .kv-nappi[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(73,115,165,.35)}
.ek-demo .kv-paneeli{font-size:.9375rem;position:absolute;right:0;top:100%;z-index:30;width:min(320px,100%);background:var(--c-surface);border:1px solid var(--c-border);border-top:0;border-radius:0 0 var(--r-card) var(--r-card);box-shadow:0 16px 32px -12px rgba(36,31,25,.28);padding:0 0 8px;animation:ekd-verho .22s cubic-bezier(.22,.9,.3,1) both}
.ek-demo .phone .kv-paneeli{width:100%;border-radius:0;border-width:0 0 1px}
@keyframes ekd-verho{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.ek-demo .kv-profiili{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:14px 16px;margin-bottom:6px;background:rgba(73,115,165,.07);border-bottom:1px solid var(--c-border);text-align:right}
.ek-demo .kv-profiili b{display:block;font-size:1.02em;line-height:1.3}
.ek-demo .kv-profiili span{display:block;font-size:.85em;color:var(--c-text2)}
.ek-demo .kv-profiili .kv-avatar,.ek-demo .kv-avatar{flex:0 0 auto;display:inline-flex;line-height:1;letter-spacing:.02em;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#4973A5,#2F5282);color:#fff;font-size:17px;font-weight:500;box-shadow:0 2px 8px rgba(73,115,165,.35)}
.ek-demo .kv-ryhma{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 12px;padding:.4rem 16px}
.ek-demo .kv-ryhma span{color:var(--c-text2);font-size:.9em}
.ek-demo .kv-radio{min-width:48px;min-height:40px;padding:0 .6rem;border:1px solid var(--c-border-m);border-radius:var(--r-control);background:none;color:var(--c-muted);font-size:.85em;font-weight:500;cursor:pointer}
.ek-demo .kv-radio[aria-checked="true"]{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent);box-shadow:0 1px 3px rgba(73,115,165,.4)}
.ek-demo .kv-kohta{display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:44px;padding:.6rem 16px;border:0;background:none;text-align:right;cursor:pointer;color:inherit}
.ek-demo .kv-kohta:hover,.ek-demo .kv-kohta:focus{background:rgba(73,115,165,.08);box-shadow:inset -3px 0 0 var(--c-accent);outline:none}
.ek-demo .kv-kohta svg{width:18px;height:18px;flex:0 0 auto;color:var(--c-muted)}
.ek-demo .kv-kohta.vaara{font-weight:500}
.ek-demo .kv-kohta.vaara svg{color:var(--c-muted)}
.ek-demo .kv-erotin{height:1px;margin:4px 0;background:var(--c-border)}
.ek-demo .kv-huom{margin:.2rem 16px 0;font-size:.75rem;color:var(--c-muted);text-align:right}
.ek-demo .a-main{padding:1.5rem 1rem}
.ek-demo .a-title{margin:0 0 1rem;font-size:1.25rem;font-weight:500;line-height:1.25}
.ek-demo .a-title:focus{outline:none}
.ek-demo .a-sub{margin:0 0 1rem;font-size:.85rem;color:var(--c-muted)}
.ek-demo .a-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-card);padding:1rem;margin-bottom:1rem;display:flex;flex-direction:column;min-width:0}
.ek-demo .a-card-t{margin:0 0 .75rem;font-size:.95rem;font-weight:500;color:var(--c-text2)}
.ek-demo .a-card-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.75rem;min-width:0}
.ek-demo .a-card-row .a-card-t{margin:0;min-width:0;overflow-wrap:anywhere}
.ek-demo .a-label{display:block;padding:0;font-size:.8rem;font-weight:500;color:var(--c-text2);margin-bottom:.35rem}
.ek-demo .a-input{border:1px solid var(--c-border-m);border-radius:var(--r-field);padding:.6rem .7rem;margin-bottom:.9rem;width:100%;background:var(--c-surface2);color:var(--c-text);font:inherit;min-width:0}
.ek-demo .a-input:focus-visible{outline:2px solid var(--c-accent);outline-offset:1px}
.ek-demo textarea.a-input{resize:vertical;min-height:4.5rem}
.ek-demo .a-input:disabled{opacity:.6}
.ek-demo .a-hint{margin:-.5rem 0 .9rem;font-size:.75rem;color:var(--c-muted)}
.ek-demo .a-hint:last-child{margin-bottom:0}
.ek-demo .a-err{margin:0 0 .9rem;font-size:.82rem;color:var(--c-danger);font-weight:500}
.ek-demo .a-set{border:none;padding:0;margin:0 0 .9rem;min-width:0}
.ek-demo .tapa-rivi{display:flex;gap:.5rem;flex-wrap:wrap}
.ek-demo .tapa{display:flex;align-items:center;gap:.45rem;cursor:pointer;border:1px solid var(--c-border-m);border-radius:var(--r-field);padding:.5rem .75rem;font-size:.85rem;background:var(--c-surface2);flex:1 1 160px;min-width:0}
/* Valintanapit ilman radiopalloa kuten sovelluksessa (PWA #486, 15.10.2026): radio jää DOM:iin visuaalisesti piilotettuna, valittu nappi erottuu taustasta, reunasta ja lihavasta tekstistä. */
.ek-demo .tapa{position:relative}
.ek-demo .tapa input{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ek-demo .tapa:has(input:checked){border-color:var(--c-accent);font-weight:600;box-shadow:inset 0 0 0 1px var(--c-accent);background:color-mix(in srgb,var(--c-accent) 14%,var(--c-surface,#fff))}
.ek-demo .tapa:has(input:focus-visible){outline:2px solid var(--c-accent);outline-offset:2px}
.ek-demo .tapa:has(input:disabled){opacity:.6;cursor:default}
/* Syottotapa ja Alkoi/Paattyi vierekkain myos 360 px:lla (paatos 26.9.2026): ei rivitysta, tilaa otetaan paddingista. */
.ek-demo .tapa-rivi.puolikas{flex-wrap:nowrap}
.ek-demo .tapa-rivi.puolikas .tapa{flex:1 1 0;padding:.5rem;gap:.4rem}
.ek-demo .time-row{display:flex;gap:.5rem}
.ek-demo .time-col{flex:1 1 0;display:flex;flex-direction:column;min-width:0}
.ek-demo .time-col .a-input{padding:.6rem .45rem}
.ek-demo .check{display:flex;align-items:center;gap:.5rem;font-size:.85rem;cursor:pointer}
/* Radio-valinnat .check-labelissa (Kappale-valinta) napeiksi ilman palloa kuten sovelluksessa (PWA #486). */
.ek-demo .check:has(>input[type=radio]){position:relative;border:1px solid var(--c-border-m);border-radius:var(--r-field);padding:.5rem .75rem;background:var(--c-surface2)}
.ek-demo .check>input[type=radio]{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ek-demo .check:has(>input[type=radio]:checked){border-color:var(--c-accent);font-weight:600;box-shadow:inset 0 0 0 1px var(--c-accent);background:color-mix(in srgb,var(--c-accent) 14%,var(--c-surface,#fff))}
.ek-demo .check:has(>input[type=radio]:focus-visible){outline:2px solid var(--c-accent);outline-offset:2px}
.ek-demo .check input{width:18px;height:18px;margin:0;accent-color:var(--c-accent)}
.ek-demo .pikku{flex:none;border:1px solid var(--c-border-m);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-text2);padding:4px 12px;font-size:.75rem;font-weight:500;cursor:pointer}
.ek-demo .pikku:disabled{opacity:.5;cursor:default}
.ek-demo .tiivis{margin:0;font-size:.85rem;font-weight:500;overflow-wrap:anywhere}
.ek-demo .tiivis.tyhja{font-size:.8rem;font-weight:400;color:var(--c-muted)}
.ek-demo .pv-row{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.ek-demo .pv-h{font-size:1.6rem;font-weight:500;line-height:1.1}
.ek-demo .pv-d{font-size:.9rem;color:var(--c-text2)}
.ek-demo .pv-hint{margin:.4rem 0 0;font-size:.75rem;color:var(--c-muted)}
.ek-demo .pv-empty{margin:0;font-size:.85rem;color:var(--c-muted)}
.ek-demo .pv-empty.err{color:var(--c-danger);font-weight:500}
.ek-demo .btn-p{width:100%;border:none;border-radius:var(--r-control);padding:.85rem;background:var(--c-accent);color:var(--c-on-accent);font-weight:500;cursor:pointer}
.ek-demo .btn-p:disabled{opacity:.45;cursor:not-allowed}
/* Puute-selite napin yllä (components/PuuteVihje.jsx, PWA #97): ensin hillitty, himmeän napin painalluksen jälkeen korostettu; ei punainen */
.ek-demo .puute{margin:0}
.ek-demo .puute:not(:empty){margin:0 0 .6rem;font-size:.82rem;color:var(--c-text2)}
.ek-demo .puute.yritetty:not(:empty){padding:.55rem .75rem;font-size:.85rem;font-weight:600;color:var(--c-text);border-radius:var(--r-field);background:color-mix(in srgb,var(--c-accent) 10%,var(--c-surface));border-left:3px solid var(--c-accent)}
.ek-demo .puute-k{border:1px solid var(--c-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-accent) 22%,transparent);background:color-mix(in srgb,var(--c-accent) 7%,var(--c-surface2))}
.ek-demo .btn-p[aria-disabled="true"],.ek-demo .btn-jatka[aria-disabled="true"]{opacity:.55}
.ek-demo .vl{position:relative;min-width:0;margin-bottom:.9rem}
.ek-demo .vl-nappi{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;min-width:0;text-align:left;cursor:pointer;min-height:44px;padding:.45rem .7rem;border:1px solid var(--c-border-m);border-radius:var(--r-field);background:var(--c-surface);color:var(--c-text)}
.ek-demo .vl-nappi:disabled{cursor:default;opacity:.7}
.ek-demo .vl-nappi:focus-visible{outline:2px solid var(--c-accent);outline-offset:1px}
.ek-demo .vl-arvo{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ek-demo .vl-arvo.tyhja{color:var(--c-text2)}
.ek-demo .vl-nuoli{flex:0 0 auto;width:0;height:0;border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.38em solid currentColor;opacity:.7;transition:transform .12s ease}
.ek-demo .vl-nappi[aria-expanded="true"] .vl-nuoli{transform:rotate(180deg)}
.ek-demo .vl-paneeli{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:25;display:flex;flex-direction:column;overflow:hidden;background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border-m);border-radius:var(--r-panel);box-shadow:var(--shadow);animation:ekd-vlauki .17s cubic-bezier(.2,.8,.2,1)}
@keyframes ekd-vlauki{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.ek-demo .vl-lista{margin:0;padding:4px 0;list-style:none;max-height:280px;overflow-y:auto;overscroll-behavior:contain}
.ek-demo .vl-kohta{display:flex;align-items:flex-start;gap:.4rem;min-height:44px;padding:.6rem .75rem .6rem .5rem;line-height:1.3;cursor:pointer;overflow-wrap:anywhere}
.ek-demo .vl-kohta:hover{background:rgba(73,115,165,.07)}
.ek-demo .vl-kohta.akt{background:rgba(73,115,165,.12);outline:2px solid var(--c-accent);outline-offset:-2px}
.ek-demo .vl-kohta.val{font-weight:500}
.ek-demo .vl-merkki{flex:0 0 1.1em;text-align:center;color:var(--c-accent);font-weight:500}
.ek-demo .vl-teksti{flex:1 1 auto;min-width:0}
.ek-demo .vl-kuvaus{display:block;font-size:.85em;font-weight:400;color:var(--c-muted)}
.ek-demo .vl-kohta.uusi{color:var(--c-accent);font-weight:500;border-bottom:1px solid var(--c-border)}
.ek-demo .vl-kohta.tyhja{color:var(--c-text2)}
.ek-demo .et-yla{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:1rem}
.ek-demo .et-yla h1{margin:0;font-size:1.25rem}
.ek-demo .et-kayttaja b{display:block;font-size:.82rem;font-weight:500;text-align:right}
.ek-demo .et-kayttaja span{display:block;font-size:.75rem;color:var(--c-muted);text-align:right}
.ek-demo .ok-note{background:var(--c-ok-bg);border:1px solid var(--c-ok-line);color:var(--c-ok);border-radius:var(--r-card);padding:.7rem .9rem;margin:0 0 1rem;font-size:.85rem;font-weight:500}
.ek-demo .vk-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.ek-demo .vk-head h2{margin:0;font-size:.95rem;color:var(--c-text2)}
.ek-demo .vk-head b{font-size:1rem;white-space:nowrap}
.ek-demo .vk-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem}
.ek-demo .vk-rivi{display:flex;flex-direction:column;gap:.15rem;border:1px solid var(--c-border);border-radius:var(--r-row);padding:.5rem .7rem;background:var(--c-surface2)}
.ek-demo .vk-main{display:flex;align-items:baseline;gap:.2rem .6rem;flex-wrap:wrap}
.ek-demo .vk-pvm{font-weight:500;font-size:.82rem;white-space:nowrap}
.ek-demo .vk-kohde{flex:1 1 5rem;min-width:0;font-size:.82rem;color:var(--c-text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ek-demo .vk-tag{font-size:.7rem;font-weight:500;color:var(--c-muted);white-space:nowrap}
.ek-demo .vk-h{font-weight:500;font-size:.82rem;white-space:nowrap}
.ek-demo .vk-kyna{display:flex;align-self:center;color:var(--c-muted)}
.ek-demo .vk-kyna.lukossa{opacity:.35}
.ek-demo .vk-merkki{display:block;margin-top:.2rem}
.ek-demo .vk-leima{font-size:.72rem;color:var(--c-muted)}
.ek-demo .vk-ylityo{margin:0 0 .6rem;font-size:.75rem;color:var(--c-muted)}
.ek-demo .hv-vaiheet{margin-top:1.25rem}
.ek-demo .kyna{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.ek-demo .badge{display:inline-block;border-radius:var(--r-control);padding:5px 12px;line-height:1.3;font-size:.7rem;font-weight:500;white-space:nowrap;letter-spacing:.02em}
.ek-demo .badge.luonnos{background:var(--b-luonnos-bg);color:var(--b-luonnos)}
.ek-demo .badge.lahetetty{background:var(--b-lahetetty-bg);color:var(--b-lahetetty)}
.ek-demo .badge.hyvaksytty{background:var(--b-hyvaksytty-bg);color:var(--b-hyvaksytty)}
.ek-demo .badge.hylatty{background:var(--b-hylatty-bg);color:var(--b-hylatty)}
.ek-demo .badge.avattu{background:var(--b-avattu-bg);color:var(--b-avattu)}
.ek-demo .era-main{max-width:720px;margin:0 auto;padding:1.5rem 1rem 2rem}
.ek-demo .paluu{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;margin-top:-.75rem;margin-bottom:.25rem;color:var(--c-muted);font-size:.85rem;font-weight:500;text-decoration:none}
.ek-demo .title-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;margin-bottom:.25rem}
.ek-demo .title-row h1,.ek-demo .title-row h3{margin:0;font-size:1.25rem;min-width:0;overflow-wrap:anywhere}
.ek-demo .tietolista{display:grid;grid-template-columns:minmax(0,1fr);row-gap:.45rem;margin:0 0 1rem;padding:1rem;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-card);font-size:.85rem}
.ek-demo .tietolista.plain{padding:0;background:none;border:0;margin:.4rem 0 .6rem}
.ek-demo .tl-pari{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1rem;row-gap:.1rem;min-width:0}
.ek-demo .tl-pari dt{flex:0 0 9.5em;max-width:100%;overflow-wrap:break-word;color:var(--c-muted)}
.ek-demo .tl-pari dd{flex:1 1 9em;min-width:0;margin:0;font-weight:500;overflow-wrap:anywhere}
.ek-demo .dd-muted{color:var(--c-muted);font-weight:400}
.ek-demo .dd-note{display:block;margin-top:.2rem;color:var(--c-danger);font-weight:500}
.ek-demo .era-sub{margin:0 0 1rem;color:var(--c-muted);font-size:.9rem}
.ek-demo .copy-row{margin:0 0 1.25rem;position:relative}
/* Koonnin sivun PDF-toiminnot esillä (TulostusToiminnot.jsx muoto="napit"): napit rivissä, alla Kappale-valinta */
.ek-demo .tulostus-paneeli{font-size:.85rem}
.ek-demo .tulostus-paneeli .tp-napit{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .6rem}
.ek-demo .tulostus-paneeli .tp-napit .pikku{display:inline-flex;align-items:center;gap:.4rem;padding:6px 12px}
.ek-demo .tulostus-paneeli .tp-napit svg{width:15px;height:15px;flex:none}
.ek-demo .tulostus-paneeli fieldset{border:0;margin:0;padding:0;min-width:0}
.ek-demo .tulostus-paneeli legend{padding:0;margin:0 0 .3rem;font-weight:500;font-size:.8rem;color:var(--c-text2)}
.ek-demo .tulostus-paneeli .check{margin:.15rem 0}
.ek-demo .tulostus-paneeli .varoitus{color:var(--c-danger);font-weight:500;font-size:.8rem;margin:.35rem 0 0}
.ek-demo .tulostus-paneeli .dd-muted{margin:.35rem 0 0}
.ek-demo .box{border-radius:var(--r-card);padding:1.1rem 1.25rem;margin-bottom:1rem;line-height:1.45}
.ek-demo .box p{margin:0}
.ek-demo .box.ok{background:var(--c-ok-bg);border:1px solid var(--c-ok-line);color:var(--c-ok);font-size:.88rem;font-weight:500}
.ek-demo .box.bad{background:var(--c-bad-bg);border:1px solid var(--c-bad-line)}
.ek-demo .box.bad h2{margin:0 0 .3rem;font-size:.85rem;color:var(--c-danger)}
.ek-demo .box.bad .t{font-size:.88rem;color:var(--c-bad-text);overflow-wrap:anywhere}
.ek-demo .box.bad .m{font-size:.75rem;color:var(--c-bad-text);opacity:.85;margin-top:.3rem}
.ek-demo .box.reopen{background:var(--b-avattu-bg);border:1px solid color-mix(in srgb,var(--b-avattu) 35%,transparent)}
.ek-demo .box.reopen h2{margin:0 0 .3rem;font-size:.9rem;color:var(--b-avattu)}
.ek-demo .box.reopen p{font-size:.85rem;color:var(--c-text)}
.ek-demo .box.reopen .lbl{margin-top:.5rem;font-size:.75rem;font-weight:500;color:var(--c-text2)}
.ek-demo .box.info{background:var(--c-surface2);border:1px solid var(--c-border);font-size:.85rem;color:var(--c-text2)}
.ek-demo .rows-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:1.5rem 0 .6rem}
.ek-demo .sec-t{margin:1.5rem 0 .6rem;font-size:.95rem}
.ek-demo .rows-head .sec-t{margin:0}
.ek-demo .lock-note{margin:.5rem 0 .75rem;font-size:.8rem;color:var(--c-text2);background:var(--c-surface2);border:1px solid var(--c-border);border-radius:var(--r-row);padding:.55rem .75rem}
.ek-demo .km-alert{margin:0 0 .6rem;padding:.6rem .85rem;background:var(--c-bad-bg);border:1px solid var(--c-bad-line);border-radius:var(--r-card);font-size:.82rem;color:var(--c-bad-text);font-weight:500}
.ek-demo .row-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem}
.ek-demo .tt-otsikko{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin:.6rem 0 .1rem;padding:0 .2rem;font-size:.85rem}
.ek-demo .tt-otsikko:first-child{margin-top:0}
.ek-demo .tt-otsikko span{color:var(--c-muted);font-size:.78rem;white-space:nowrap}
.ek-demo .hv-ryhmat{display:grid;gap:.4rem}
.ek-demo .hv-ryhma{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-row)}
.ek-demo .hv-ryhma summary{display:flex;align-items:baseline;gap:.6rem;padding:.6rem .85rem;cursor:pointer;list-style:none}
.ek-demo .hv-ryhma summary::-webkit-details-marker{display:none}
.ek-demo .hv-ryhma summary::before{content:"›";color:var(--c-muted);transition:transform .15s;display:inline-block}
.ek-demo .hv-ryhma[open] summary::before{transform:rotate(90deg)}
.ek-demo .hv-ryhma .row-nimi{flex:1 1 auto;font-weight:500;color:var(--c-text)}
.ek-demo .hv-pv{font-size:.8rem;color:var(--c-muted);white-space:nowrap}
.ek-demo .hv-paivat{list-style:none;margin:0;padding:0 .85rem .5rem 1.9rem}
.ek-demo .hv-paivat li{display:flex;flex-wrap:wrap;gap:.2rem .7rem;padding:.3rem 0;border-top:1px solid var(--c-border);font-size:.85rem}
.ek-demo .hv-paivat .row-h{margin-left:auto;font-weight:500}
.ek-demo .hv-paivat .row-pvm{font-weight:400;color:var(--c-text2)}
.ek-demo .hv-km{flex-basis:100%;font-size:.74rem;color:var(--c-muted)}
.ek-demo .e-row{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-row);padding:.6rem .85rem;min-width:0}
.ek-demo .e-row.kor{border-color:var(--c-danger);background:var(--c-bad-bg);box-shadow:inset 0 0 0 1px var(--c-danger)}
.ek-demo .e-row.irti{display:none}
.ek-demo .row-top{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.ek-demo .row-pvm{font-weight:500;font-size:.85rem;white-space:nowrap}
.ek-demo .row-nimi{flex:1 1 4rem;min-width:0;font-size:.85rem;color:var(--c-text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ek-demo .row-h{font-weight:500;font-size:.85rem;white-space:nowrap}
.ek-demo .edit-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:-8px -6px;border-radius:var(--r-control);color:var(--c-muted);background:none;border:0;cursor:pointer}
.ek-demo .edit-btn:hover{background:var(--c-surface2)}
.ek-demo .remove-btn{flex:none;border:1px solid var(--c-border);border-radius:var(--r-control);background:transparent;color:var(--c-muted);padding:3px 9px;font-size:.72rem;font-weight:500;cursor:pointer}
.ek-demo .row-meta{display:flex;flex-wrap:wrap;gap:.2rem .7rem;margin-top:.2rem;font-size:.74rem;color:var(--c-muted);min-width:0}
.ek-demo .row-meta .dt{font-weight:500}
.ek-demo .row-meta .nw{white-space:nowrap}
.ek-demo .row-meta .an{min-width:0;overflow-wrap:anywhere}
.ek-demo .row-leima{display:block;margin-top:.25rem;font-size:.72rem;color:var(--c-accent);font-weight:500}
.ek-demo .km-box{margin-top:.55rem;padding:.6rem .7rem;background:var(--c-surface2);border:1px solid var(--c-border);border-radius:var(--r-row)}
.ek-demo .km-box .kt{margin:0 0 .45rem;font-size:.78rem;font-weight:500;color:var(--c-text2)}
.ek-demo .km-fields{display:flex;flex-wrap:wrap;gap:.5rem}
.ek-demo .km-field{display:flex;flex-direction:column;flex:1 1 7rem;min-width:0}
.ek-demo .km-field.wide{flex:3 1 12rem}
.ek-demo .km-lbl{display:block;padding:0;font-size:.72rem;font-weight:500;color:var(--c-text2);margin-bottom:.2rem}
.ek-demo .km-input{border:1px solid var(--c-border-m);border-radius:var(--r-field);padding:.4rem .55rem;background:var(--c-surface);color:var(--c-text);font:inherit;font-size:.85rem;min-width:0;width:100%}
.ek-demo .km-set{border:0;padding:0;margin:.55rem 0 0;min-width:0}
.ek-demo .km-valinnat{display:flex;flex-wrap:wrap;gap:.4rem}
.ek-demo .km-valinta{display:flex;align-items:center;gap:.35rem;cursor:pointer;border:1px solid var(--c-border-m);border-radius:var(--r-field);padding:.35rem .6rem;font-size:.78rem;background:var(--c-surface)}
.ek-demo .km-valinta input{margin:0;accent-color:var(--c-accent)}
.ek-demo .km-valinta:has(input:checked){border-color:var(--c-accent);font-weight:500;box-shadow:inset 0 0 0 1px var(--c-accent)}
.ek-demo .km-actions{display:flex;justify-content:flex-end;margin-top:.55rem}
.ek-demo .add-btn{border:none;border-radius:var(--r-control);padding:.55rem 1.1rem;background:var(--c-accent);color:var(--c-on-accent);font-weight:500;cursor:pointer;font-size:.82rem}
.ek-demo .add-btn:disabled{opacity:.45;cursor:default}
.ek-demo .add-btn.km-ok,.ek-demo .add-btn.km-ok:disabled{background:#1F6B4A;color:#fff;opacity:1}
.ek-demo .edit-box{margin-top:.6rem;padding:.75rem;background:var(--c-surface2);border:1px dashed var(--c-border-m);border-radius:var(--r-row)}
.ek-demo .edit-box h4{margin:0 0 .5rem;font-size:.85rem}
.ek-demo .edit-box .a-input{margin-bottom:.6rem;background:var(--c-surface)}
.ek-demo .edit-box .check{margin-bottom:.6rem}
.ek-demo .hist-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem}
.ek-demo .hist-item{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-row);padding:.6rem .85rem;min-width:0}
.ek-demo .hist-top{display:flex;align-items:center;gap:.5rem .75rem;flex-wrap:wrap}
.ek-demo .hist-aika{font-size:.75rem;color:var(--c-muted)}
.ek-demo .hist-who{margin:.25rem 0 0;font-size:.82rem;font-weight:500}
.ek-demo .hist-text{margin:.3rem 0 0;font-size:.82rem;color:var(--c-text2);white-space:pre-wrap;overflow-wrap:anywhere}
.ek-demo .aj{min-width:0;margin-bottom:1.25rem}
.ek-demo .aj-otsake{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 1rem;margin-bottom:.6rem}
.ek-demo .aj-otsake .sec-t{margin:1.5rem 0 0}
.ek-demo .aj-suodatin{flex:0 1 16rem;min-width:0}
.ek-demo .aj-suodatin .a-label{margin-bottom:.25rem}
.ek-demo .aj-suodatin .vl{margin-bottom:0}
.ek-demo .aj-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
.ek-demo .aj-alkio{position:relative;min-width:0;padding:0 0 .9rem 22px}
.ek-demo .aj-alkio:last-child{padding-bottom:0}
.ek-demo .aj-alkio::before{content:"";position:absolute;left:5px;top:calc(.55em + 6px);bottom:calc(-.55em + 6px);width:2px;background:var(--c-border)}
.ek-demo .aj-alkio:last-child::before{display:none}
.ek-demo .aj-piste{position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;border:2px solid var(--c-muted);background:var(--c-surface)}
.ek-demo .aj-alkio--rivi .aj-piste{width:10px;height:10px;left:1px;top:calc(.55em + 1px)}
.ek-demo .aj-otsikko{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;min-width:0;line-height:1.35}
.ek-demo .aj-otsikko strong{font-weight:500;overflow-wrap:anywhere}
.ek-demo .aj-alkio--koonti .aj-otsikko strong{font-size:.92rem}
.ek-demo .aj-merkki{display:inline-block;border-radius:var(--r-control);padding:4px 11px;line-height:1.35;margin-bottom:2px}
.ek-demo .aj-alkio--rivi .aj-otsikko strong{font-size:.86rem}
.ek-demo .aj-kenen{font-size:.82rem;color:var(--c-text2);overflow-wrap:anywhere}
.ek-demo .aj-meta{margin:.15rem 0 0;font-size:.76rem;color:var(--c-muted);overflow-wrap:anywhere}
.ek-demo .aj-tiivistelma{margin:.25rem 0 0;font-size:.8rem;color:var(--c-text2);overflow-wrap:anywhere}
.ek-demo .aj-muutokset{list-style:none;margin:.3rem 0 0;padding:0;font-size:.8rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem}
.ek-demo .aj-muutos{min-width:0;overflow-wrap:anywhere;color:var(--c-text2)}
.ek-demo .aj-muutos__nimi{font-weight:500;margin-right:.35em}
.ek-demo .aj-muutos__vanha,.ek-demo .aj-muutos__uusi{display:inline-block;max-width:100%;vertical-align:top}
.ek-demo .aj-muutos__vanha{color:var(--c-muted)}
.ek-demo .aj-muutos__nuoli{margin:0 .3em;color:var(--c-muted)}
.ek-demo .aj-muutos__uusi{font-weight:500;color:var(--c-text)}
.ek-demo .aj-lainaus{margin:.35rem 0 0;padding:.15rem 0 .15rem .6rem;border-left:3px solid var(--c-border);font-size:.82rem;color:var(--c-text2);white-space:pre-wrap;overflow-wrap:anywhere}
.ek-demo .aj-linkkinappi{border:none;background:none;padding:.35rem 0;min-height:32px;font:inherit;font-size:.8rem;font-weight:500;color:var(--c-accent);cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:2px}
.ek-demo .aj-piilotettu{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .75rem;margin:0 0 .5rem 22px;font-size:.8rem;color:var(--c-muted)}
.ek-demo .sum-card .aj{margin-bottom:0}
.ek-demo .snap{margin-top:1rem}
.ek-demo .snap .muted{margin:0 0 .5rem;font-size:.8rem;color:var(--c-muted)}
.ek-demo .actions{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--c-border)}
.ek-demo .action-row{display:flex;flex-wrap:wrap;gap:.6rem}
.ek-demo .send-btn{flex:1 1 14rem;border:none;border-radius:var(--r-control);padding:.8rem;background:var(--c-accent);color:var(--c-on-accent);font-weight:500;cursor:pointer}
.ek-demo .hold-btn{flex:1 1 14rem;border-radius:var(--r-control);padding:.8rem;border:1px solid var(--c-border-m);background:var(--c-surface);color:var(--c-text2);font-weight:500;cursor:pointer}
.ek-demo .a-hint2{margin:.5rem 0 0;font-size:.78rem;color:var(--c-muted)}
.ek-demo .dialog{margin-top:.8rem;padding:1rem;background:var(--c-surface);border:1px solid var(--c-border-m);border-radius:var(--r-card);box-shadow:var(--shadow)}
.ek-demo .dialog h2{margin:0 0 .5rem;font-size:1rem}
.ek-demo .dialog p{margin:0 0 .7rem;font-size:.85rem;color:var(--c-text2)}
.ek-demo .counter{font-size:.72rem;color:var(--c-muted);text-align:right;margin:-.6rem 0 .6rem}
.ek-demo .inbox{padding:14px 12px}
.ek-demo .inbox-h{display:flex;justify-content:space-between;align-items:baseline;margin:2px 4px 10px}
.ek-demo .inbox-h b{font-size:1.1rem}
.ek-demo .inbox-h span{font-size:.75rem;color:var(--c-muted)}
.ek-demo .mail-item{display:block;width:100%;text-align:left;background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;padding:14px 16px;cursor:pointer;margin-bottom:10px}
.ek-demo .mail-item.uusi{border-left:4px solid var(--c-accent)}
.ek-demo .mail-item .from{display:flex;justify-content:space-between;gap:8px;font-size:.72rem;color:var(--c-muted)}
.ek-demo .mail-item .sub{display:block;font-weight:700;margin:5px 0 4px;color:var(--c-text);font-size:.88rem;overflow-wrap:anywhere}
.ek-demo .mail-item .pre{display:block;font-size:.78rem;color:var(--c-text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ek-demo .mail-item.vanha{opacity:.7}
.ek-demo .mail-body{background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;margin:-2px 0 10px;overflow:hidden;animation:ekd-in .3s ease both}
.ek-demo .mail-brand{padding:14px 20px;border-bottom:1px solid var(--c-border);font-weight:700;font-size:.9rem}
.ek-demo .mail-in{padding:20px 20px 22px;font-size:.88rem;line-height:1.6}
.ek-demo .mail-in p{margin:0 0 14px}
.ek-demo .mail-tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4973A5;background:rgba(73,115,165,.12);border-radius:4px;padding:4px 9px;margin-bottom:12px}
.ek-demo .mail-tag.red{color:var(--b-hylatty);background:var(--b-hylatty-bg)}
.ek-demo .mail-tag.vio{color:var(--b-avattu);background:var(--b-avattu-bg)}
.ek-demo .mail-tag.fix{color:var(--b-lahetetty);background:var(--b-lahetetty-bg)}
.ek-demo .korj-box{background:var(--b-lahetetty-bg);border:1px solid color-mix(in srgb,var(--b-lahetetty) 30%,transparent);border-radius:10px;padding:12px 14px;margin:0 0 12px;font-size:.85rem}
.ek-demo .korj-box p{margin:0 0 6px}
.ek-demo .korj-box p:last-child{margin:0}
.ek-demo .korj-box .korj-t2{font-weight:700;margin:10px 0 4px!important}
.ek-demo .korj-lista{margin:0 0 10px;padding:0 0 0 18px}
.ek-demo .korj-lista li{margin:0 0 6px}
.ek-demo .korj-lista li span{display:block;font-size:.75rem;color:var(--c-muted)}
.ek-demo .korj-box .korj-t{font-weight:700;color:var(--b-lahetetty)}
.ek-demo .korj-box .syy{margin:0 0 8px;background:var(--c-surface)}
.ek-demo .mail-aj{margin-top:14px;padding-top:12px;border-top:1px solid var(--c-border)}
.ek-demo .mail-aj-t{font-weight:700;font-size:.8rem;margin:0 0 10px;color:var(--c-text2)}
.ek-demo .hv-fix{margin:0 0 1rem}
.ek-demo .hv-fix-t{display:inline-block;margin:0 0 .5rem;font-size:.7rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--b-lahetetty);background:var(--b-lahetetty-bg);border-radius:4px;padding:3px 8px}
.ek-demo .hv-fix .korj-box{margin:0}
.ek-demo .mail-jakso{margin:0 0 4px!important;font-size:.8rem;color:var(--c-muted)}
.ek-demo .mail-h1{font-size:1.05rem;font-weight:700;margin:0 0 16px;line-height:1.35;overflow-wrap:anywhere}
.ek-demo .mail-bar{display:grid;grid-template-columns:minmax(0,1fr);margin:18px 0 20px;padding:2px 14px;background:var(--c-surface2);border-radius:8px}
.ek-demo .mail-bar div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;min-width:0;border-bottom:1px solid var(--c-border)}
.ek-demo .mail-bar div:last-child{border-bottom:0}
.ek-demo .mail-bar span{font-size:.72rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.ek-demo .mail-bar b{font-size:.9rem;text-align:right;white-space:nowrap}
.ek-demo .mail-btn{display:block;width:100%;border:0;border-radius:8px;background:#4973A5;color:#fff;font-weight:700;padding:.9rem;cursor:pointer;margin:6px 0 16px}
.ek-demo[data-theme="dark"] .mail-btn{background:#8FB3DC;color:#141517}
@media (prefers-color-scheme:dark){.ek-demo:not([data-theme="light"]) .mail-btn{background:#8FB3DC;color:#141517}
}
.ek-demo .mail-note{font-size:.75rem;color:var(--c-muted);margin:0;line-height:1.55}
.ek-demo .liite{display:flex;gap:10px;align-items:center;font-size:.75rem;border:1px solid var(--c-border);border-radius:8px;padding:10px 12px;margin-top:16px;overflow-wrap:anywhere;min-width:0}
.ek-demo .liite svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--c-danger);stroke-width:1.6}
.ek-demo .syy{background:var(--c-surface2);border:1px solid var(--c-border);border-radius:10px;padding:10px 12px;font-style:italic;margin:0 0 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.ek-demo .hv{--r-card:12px;--r-field:10px;--r-row:9px;position:relative;background:var(--c-bg);min-height:100%}
.ek-demo .hv-head{display:flex;align-items:center;padding:.75rem 1rem;background:var(--c-surface);border-bottom:1px solid var(--c-border)}
.ek-demo .hv-head img{display:block;height:28px;width:auto;max-width:100%}
.ek-demo .hv-main{position:relative;padding:1.5rem 1rem;max-width:640px;margin:0 auto}
.ek-demo .hv-main .title-row{margin-bottom:1rem}
.ek-demo .hv-sub{margin:0 0 1.25rem;color:var(--c-muted);font-size:.9rem}
.ek-demo .hv-sec{margin:1.5rem 0 .6rem;font-size:.95rem}
.ek-demo .hv-row{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-row);padding:.6rem .85rem}
.ek-demo .hv-note{margin:.9rem 0 0;font-size:.75rem;color:var(--c-muted)}
.ek-demo .hv .tietolista{row-gap:.75rem;padding:1.1rem 1.2rem;font-size:.88rem}
.ek-demo .hv .tl-pari{display:block}
.ek-demo .hv .tl-pari dt{display:block;max-width:none;margin-bottom:.1rem;font-weight:500;color:var(--c-text)}
.ek-demo .hv .tl-pari dd{display:block;font-weight:400;overflow-wrap:break-word;line-height:1.4}
.ek-demo .hv-okbox{background:var(--c-ok-bg);border:1px solid var(--c-ok-line);border-radius:var(--r-card);padding:1.1rem 1.25rem;margin-bottom:1rem}
.ek-demo .hv-okbox p{margin:0;color:var(--c-ok);font-size:.8rem}
.ek-demo .hv-okbox p:first-child{font-size:.9rem;font-weight:500;margin-bottom:.25rem}
.ek-demo .hv-badbox{background:var(--c-bad-bg);border:1px solid var(--c-bad-line);border-radius:var(--r-card);padding:1.1rem 1.25rem;margin-bottom:1rem}
.ek-demo .hv-badbox p{margin:0;color:var(--c-bad-text);font-size:.8rem}
.ek-demo .hv-badbox p:first-child{font-size:.9rem;font-weight:500;margin-bottom:.25rem;color:var(--c-danger)}
.ek-demo .hv-neutral{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-card);padding:1.25rem}
.ek-demo .hv-neutral h3{margin:0 0 .5rem;font-size:1.05rem}
.ek-demo .hv-neutral p{margin:0;font-size:.88rem;color:var(--c-text2)}
.ek-demo .hv-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem}
.ek-demo .hv-ok{flex:1 1 150px;border:none;border-radius:var(--r-control);padding:.8rem;background:#1B6E3C;color:#fff;font-weight:500;cursor:pointer}
.ek-demo .hv-danger{flex:1 1 150px;border:none;border-radius:var(--r-control);padding:.8rem;background:var(--c-danger);color:#fff;font-weight:500;cursor:pointer}
.ek-demo[data-theme="dark"] .hv-danger{color:#191512}
@media (prefers-color-scheme:dark){.ek-demo:not([data-theme="light"]) .hv-danger{color:#191512}
}
.ek-demo .hv-sec-btn{flex:1 1 150px;border:1px solid var(--c-border-m);border-radius:var(--r-control);padding:.8rem;background:var(--c-surface);color:var(--c-text2);font-weight:500;cursor:pointer}
.ek-demo .hv-form{width:100%;display:flex;flex-direction:column}
.ek-demo .hv-form textarea{border:1px solid var(--c-border-m);border-radius:var(--r-field);padding:.6rem .7rem;width:100%;font:inherit;resize:vertical;background:var(--c-surface);color:var(--c-text)}
.ek-demo .hv-form textarea[aria-invalid="true"]{border-color:var(--c-danger)}
.ek-demo .hv-ferr{margin:.35rem 0 0;font-size:.78rem;color:var(--c-danger);font-weight:500}
.ek-demo .hv-hint{margin:.35rem 0 0;font-size:.75rem;color:var(--c-muted)}
.ek-demo .hv-closed{margin:1.25rem 0 0;font-size:.82rem;color:var(--c-muted)}
.ek-demo .hv-foot{padding:1rem;text-align:center;border-top:1px solid var(--c-border);font-size:.72rem;color:var(--c-muted)}
.ek-demo .stamp{position:relative;left:50%;top:auto;margin:.75rem 0 2.25rem;z-index:3;pointer-events:none;width:min(300px,86%);color:var(--ink);opacity:0;transform:translateX(-50%) rotate(-8deg);mix-blend-mode:multiply}
.ek-demo .stamp svg{display:block;width:100%;height:auto;overflow:visible}
.ek-demo .stamp.hit{animation:ekd-stamp .5s cubic-bezier(.2,.9,.25,1.2) forwards}
@keyframes ekd-stamp{0%{opacity:0;transform:translateX(-50%) rotate(-15deg) scale(2.6)}55%{opacity:1;transform:translateX(-50%) rotate(-7deg) scale(.93)}75%{transform:translateX(-50%) rotate(-8.5deg) scale(1.02)}100%{opacity:1;transform:translateX(-50%) rotate(-8deg) scale(1)}}
.ek-demo .stamp.hit::after{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ink) 16%,transparent),transparent);opacity:0;animation:ekd-splat .6s .2s ease-out}
@keyframes ekd-splat{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.25)}}
.ek-demo .thump{animation:ekd-thump .32s .22s ease}
@keyframes ekd-thump{0%,100%{transform:none}30%{transform:translateY(4px) scale(.992)}}
.ek-demo .stamp.static{position:relative;left:auto;top:auto;display:block;width:min(320px,100%);opacity:1;transform:rotate(-5deg);margin:34px 0 34px 8px}
@media (prefers-color-scheme:dark){.ek-demo:not([data-theme="light"]) .stamp{mix-blend-mode:normal}
}
.ek-demo[data-theme="dark"] .stamp{mix-blend-mode:normal}
.ek-demo .receipts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px;margin:0 0 22px}
.ek-demo .rc{background:var(--pg-bg);border:1px solid var(--pg-line);border-radius:14px;padding:16px;min-width:0}
.ek-demo .rc .to{font-size:13px;color:var(--pg-muted)}
.ek-demo .rc h3{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;margin:4px 0 6px;overflow-wrap:anywhere}
.ek-demo .rc .subj{font-size:12.5px;color:var(--pg-muted);margin:0 0 8px;overflow-wrap:anywhere}
.ek-demo .rc .subj b{color:var(--pg-text);font-weight:600}
.ek-demo .rc p{margin:0 0 10px;font-size:14px}
.ek-demo .file{display:flex;gap:10px;align-items:center;font-size:12.5px;border:1px dashed var(--pg-line);border-radius:10px;padding:8px 10px;margin-top:8px;min-width:0;overflow-wrap:anywhere}
.ek-demo .file svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:1.6}
.ek-demo .file.none{border-style:solid;color:var(--pg-muted)}
.ek-demo .file small{display:block;color:var(--pg-muted)}
.ek-demo .file-ver{display:block;font-weight:700;color:var(--pg-text);margin-bottom:1px}
.ek-demo .file-open{display:inline-block;margin-top:4px;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ek-demo .summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.ek-demo .sum-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-card);padding:14px}
.ek-demo .sum-card h3,.ek-demo .sum-card h4{margin:0 0 10px;font-size:14px}
.ek-demo .rivitaso{margin-top:12px;padding-top:10px;border-top:1px dashed var(--c-border);font-size:.8rem;color:var(--c-text2)}
.ek-demo .rivitaso b{display:block;font-size:.78rem;color:var(--c-text);margin-bottom:2px}
.ek-demo .mails{margin:0 0 22px;border:1px solid var(--pg-line);border-radius:14px;padding:14px 16px}
.ek-demo .mails h3{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;margin:0 0 8px}
.ek-demo .mails ul{margin:0;padding:0 0 0 18px;font-size:14px;color:var(--pg-muted)}
.ek-demo .mails li{margin:0 0 6px}
.ek-demo .mails li b{color:var(--pg-text);font-weight:600}
.ek-demo .cta{margin-top:26px;padding:22px;border-radius:16px;background:var(--pg-soft);border:1px solid var(--pg-line);display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.ek-demo .cta p{margin:0;max-width:52ch}
.ek-demo .cta a{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;text-decoration:none}
.ek-demo .muted{color:var(--pg-muted)}
@media (max-width:900px){.ek-demo .layout{grid-template-columns:minmax(0,1fr);gap:24px}
.ek-demo .steps{position:static;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ek-demo .step{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:8px 4px;gap:6px}
.ek-demo .step .s{display:none}
.ek-demo .step .t{font-size:12px;padding:0}
.ek-demo .step:not(:last-child)::before{display:none}
.ek-demo .reset{margin:6px 0 0}
.ek-demo .stage-row{grid-template-columns:minmax(0,1fr)}
.ek-demo .summary{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){.ek-demo .demo{padding:40px 16px 64px}
.ek-demo .phone{border:1px solid var(--pg-line);border-radius:16px;box-shadow:none}
.ek-demo .phone-scroll{max-height:none;overflow:visible}
.ek-demo .ylapalkki{position:relative}
.ek-demo .desk{border-radius:12px}
}
@media (prefers-reduced-motion:reduce){.ek-demo *,.ek-demo *::before,.ek-demo *::after{animation:none!important;transition:none!important}
.ek-demo .stamp.hit{opacity:1;transform:translateX(-50%) rotate(-8deg)}
}

  /* Demon sivukehys sivuston väreihin (fontit, tekstiväri ja korostusväri ovat jo samat). */
  .ek-demo { --pg-muted: #6B6F76; }

/* poissaolo (pages/Poissaolo.jsx, ViikkoLista.jsx poissaoloRivi, Home.jsx toimintokortti) */
.ek-demo{--c-poissa:#9A3B2E}
@media (prefers-color-scheme:dark){.ek-demo:not([data-theme="light"]){--c-poissa:#EBA395}}
.ek-demo[data-theme="dark"]{--c-poissa:#EBA395}
.ek-demo .et-toiminnot{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;margin:0 0 1rem}
.ek-demo .tk-kortti{font:inherit;display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;background:var(--c-surface);border:1px solid var(--c-border);border-left:4px solid var(--c-accent);border-radius:var(--r-card);padding:.85rem 1rem;color:var(--c-text);cursor:pointer}
.ek-demo .tk-kortti:hover{background:var(--c-surface2)}
.ek-demo .tk-kortti:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.ek-demo .tk-teksti{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}
.ek-demo .tk-ots{font-weight:500;font-size:.95rem}
.ek-demo .tk-kuv{font-size:.8rem;color:var(--c-muted)}
.ek-demo .tk-nuoli{flex:none;display:flex;color:var(--c-muted)}
.ek-demo .vk-rivi.vk-poissa{border-left:3px solid var(--c-poissa)}
.ek-demo .vk-laji{flex:1 1 6rem;min-width:0;font-size:.82rem;font-weight:500;color:var(--c-poissa);overflow-wrap:anywhere}
.ek-demo .vk-poissa .vk-kyna{margin-left:auto}
.ek-demo .pa-omat-t{margin:0 0 .4rem;font-size:.85rem;color:var(--c-text2)}
.ek-demo .pa-info{margin:0 0 1rem;font-size:.8rem;color:var(--c-muted)}
/* Kevyemmät painot kuten sovelluksessa (Jyrki 26.9.2026, malli B): korostus 500,
   näkymien pääotsikot 600. Demon kehys ja sähköpostinäkymät ennallaan. */
.ek-demo .app b,.ek-demo .app strong,.ek-demo .app th,.ek-demo .app h4,.ek-demo .app h5{font-weight:500}
.ek-demo .app h1,.ek-demo .app h2,.ek-demo .app h3,.ek-demo .a-title,.ek-demo .pv-h{font-weight:600}
.ek-demo .mail-body b,.ek-demo .mail-body strong{font-weight:700}
.ek-demo .tapa-ruudukko{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem}
.ek-demo .tapa-ruudukko .tapa{padding:.55rem .6rem;overflow-wrap:break-word}
/* Poissaolon syyt ja päiväkentät aina allekkain (kuten sovelluksessa). */
.ek-demo #paForm .time-row{flex-direction:column;gap:0}
.ek-demo .a-err.kentan-alla{margin-top:-.5rem}
.ek-demo .pa-ohje{margin:.4rem 0 0 1.6rem;font-size:.78rem;color:var(--c-text2)}
.ek-demo .pa-vahva{margin:-.5rem 0 0;font-size:.78rem;font-weight:500;color:var(--c-text2)}
.ek-demo .pa-varoitus{margin:0 0 .6rem;padding:.6rem .75rem;font-size:.8rem;border-left:3px solid #C28A0A;background:var(--c-warn-bg);color:var(--c-text);border-radius:var(--r-control)}
.ek-demo .pa-varoitus:last-child{margin-bottom:0}
.ek-demo .btn-paluu{font:inherit;display:block;width:100%;text-align:center;border:1px solid var(--c-border-m);border-radius:var(--r-control);padding:.85rem;background:var(--c-surface);color:var(--c-text2);font-weight:500;cursor:pointer}
.ek-demo .demo-btn.toissijainen{background:transparent;color:var(--pg-text);border:1px solid var(--pg-line)}
.ek-demo .pa-posti{background:transparent;margin:0 0 6px}
.ek-demo .pa-kortti{background:var(--c-surface2);border:1px solid var(--c-border);border-radius:12px;padding:14px 16px;margin:16px 0 14px;line-height:1.6}
.ek-demo .pa-kortti span{color:var(--c-muted)}
.ek-demo .pa-kortti b{overflow-wrap:anywhere}

/* ===== 27.9.2026: demo sovelluksen tasolle (PWA #55–#70) ===== */
/* Yläpalkissa vain logot: puhelimessa e-Kirjuri vasemmalla, viiva keskellä, yritys oikealla. */
.ek-demo .phone .ylapalkki{gap:0}
.ek-demo .phone .logo-linkki{flex:1 1 0;justify-content:flex-start}
.ek-demo .phone .yritystunnus{flex:1 1 0;justify-content:flex-end;padding-left:12px}
.ek-demo .phone .yritystunnus__nimi{max-width:none}
/* Kirjautunut käyttäjä beigellä sivun otsikkorivillä (KayttajaValikko) */
.ek-demo .et-yla{flex-wrap:nowrap;align-items:center}
.ek-demo .et-yla .a-title{min-width:0}
.ek-demo .kl{display:flex;align-items:center;gap:10px;min-width:0;margin-left:auto;flex:0 1 auto}
.ek-demo .kl-tiedot{display:flex;flex-direction:column;align-items:flex-end;min-width:0;text-align:right;line-height:1.3}
.ek-demo .kl-nimi{max-width:100%;font-size:.82rem;font-weight:500;color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ek-demo .kl-rooli{font-size:.75rem;color:var(--c-muted);white-space:nowrap}
.ek-demo .kl .kv-wrap{position:relative;margin-left:0;min-width:0}
.ek-demo .kl-nappi{width:auto;height:auto;min-height:44px;max-width:100%;gap:6px;padding:4px 6px 4px 10px;border:1px solid transparent;border-radius:var(--r-control);background:transparent;font-size:inherit;letter-spacing:0;line-height:1.3;text-align:right}
.ek-demo .kl-nappi:hover{background:var(--c-accent-soft)}
.ek-demo .kl-nappi[aria-expanded="true"]{box-shadow:none;background:var(--c-accent-soft)}
.ek-demo .kl-nuoli{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:var(--c-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.ek-demo .kl-nappi[aria-expanded="true"] .kl-nuoli{transform:rotate(180deg)}
.ek-demo .kl .kv-paneeli,.ek-demo .phone .kl .kv-paneeli{max-width:none;border:1px solid var(--c-border);border-top:0;border-radius:0 0 var(--r-card) var(--r-card);box-shadow:0 16px 32px -12px rgba(36,31,25,.28)}
.ek-demo .kv-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--c-border-m);border-radius:var(--r-control);background:var(--c-surface2)}
/* Pienet kielinapit (ylapalkki.css, PWA #92): 38×30 px, 13 px, vahva */
.ek-demo .kv-seg .kv-radio{border:0;border-radius:4px;min-width:38px;min-height:30px;padding:0 8px;font-size:.8125rem;font-weight:600;letter-spacing:.02em}
.ek-demo .era-yla{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin:-.5rem 0 .25rem}
.ek-demo .era-yla .paluu{margin:0}
.ek-demo .tr-vasen{display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;min-width:0}
/* Päivä- ja kellonaikavalitsin (PaivaValinta.jsx, AikaValinta.jsx, paivavalinta.css) */
.ek-demo .kal-kentta{position:relative;display:block;min-width:0}
.ek-demo .kal-kentta .kal-kentta__syote{width:100%;padding-right:42px}
.ek-demo .kal-kentta__nappi{position:absolute;top:50%;right:4px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--c-muted);cursor:pointer}
.ek-demo .kal-kentta__nappi:hover,.ek-demo .kal-kentta__nappi[aria-expanded="true"]{color:var(--c-accent);background:var(--c-accent-soft)}
.ek-demo .kal-kentta__nappi svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ek-demo .kal-paneeli{position:absolute;top:calc(100% + 4px);left:0;z-index:40;display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border-m);border-radius:var(--r-panel);box-shadow:var(--shadow);animation:ekd-vlauki .17s cubic-bezier(.2,.8,.2,1)}
.ek-demo .kal-paneeli.oikea{left:auto;right:0}
.ek-demo .kal-otsake{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ek-demo .kal-kuu{flex:1;text-align:center;font-weight:500;font-size:.95rem}
.ek-demo .kal-kuu::first-letter{text-transform:uppercase}
.ek-demo .kal-kuunappi{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--c-border);border-radius:8px;background:transparent;color:var(--c-text);cursor:pointer}
.ek-demo .kal-kuunappi:hover{border-color:var(--c-accent);color:var(--c-accent)}
.ek-demo .kal-kuunappi svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ek-demo .kal-viikko,.ek-demo .kal-ruudukko{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ek-demo .kal-viikko span{text-align:center;font-size:.72rem;color:var(--c-muted);padding:4px 0}
.ek-demo .kal-paiva{height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--c-text);font:inherit;font-size:.88rem;font-variant-numeric:tabular-nums;cursor:pointer}
.ek-demo .kal-paiva:hover:not(:disabled){background:var(--c-accent-soft)}
.ek-demo .kal-paiva:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
.ek-demo .kal-paiva--muu{color:var(--c-muted);opacity:.6}
.ek-demo .kal-paiva--tanaan{box-shadow:inset 0 0 0 1px var(--c-accent);font-weight:500}
/* Sunnuntait ja arkipyhät lihavoituina kuten sovelluksessa (Jyrki 6.10.2026). */
.ek-demo .kal-paiva--pyha{font-weight:700}
.ek-demo .kal-kuu{display:flex;justify-content:center;align-items:center;gap:2px;min-width:0}
.ek-demo .kal-kuu::first-letter{text-transform:none}
.ek-demo .kal-kuu .vl{margin:0;flex:0 1 auto;min-width:0}
.ek-demo .kal-kuu .vl-nappi{width:auto;min-height:36px;padding:4px 6px;gap:4px;border-color:transparent;background:transparent;font-weight:500}
.ek-demo .kal-kuu .vl-nappi:hover,.ek-demo .kal-kuu .vl-nappi:focus-visible{border-color:var(--c-border-m)}
.ek-demo .kal-kuu .vl:first-child .vl-arvo{text-transform:capitalize}
.ek-demo .kal-kuu .vl-paneeli{right:auto;min-width:150px;text-align:left;font-weight:400}
.ek-demo .kal-kuu .vl + .vl .vl-paneeli{min-width:110px}
.ek-demo .kal-piilo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ek-demo .kal-paiva--valittu,.ek-demo .kal-paiva--valittu:hover:not(:disabled){background:var(--c-accent);color:var(--c-on-accent);font-weight:500}
.ek-demo .kal-paiva:disabled{cursor:default;opacity:.3}
.ek-demo .kal-alaosa{display:flex;align-items:center;padding-top:8px;border-top:1px solid var(--c-border)}
.ek-demo .kal-linkki{padding:6px 8px;border:0;border-radius:6px;background:transparent;color:var(--c-accent);font:inherit;font-size:.85rem;cursor:pointer}
.ek-demo .kal-linkki:hover:not(:disabled){background:var(--c-accent-soft)}
.ek-demo .kal-linkki:disabled{color:var(--c-muted);cursor:default}
.ek-demo .kal-linkki--oikea{margin-left:auto}
.ek-demo .aika-ryhmat{display:grid;grid-template-columns:6fr 3fr;gap:16px}
.ek-demo .aika-ryhma{display:flex;flex-direction:column;gap:6px;min-width:0}
.ek-demo .aika-otsake{font-size:.72rem;font-weight:500;color:var(--c-muted)}
.ek-demo .aika-ruudukko{display:grid;gap:2px}
.ek-demo .aika-ruudukko--tunnit{grid-template-columns:repeat(6,1fr)}
.ek-demo .aika-ruudukko--minuutit{grid-template-columns:repeat(3,1fr);padding-left:12px;border-left:1px solid var(--c-border)}
.ek-demo .phone .aika-ryhmat{gap:10px}
.ek-demo .phone .aika-ruudukko--minuutit{padding-left:8px}
@media (pointer:coarse){.ek-demo .aika-paneeli .kal-paiva{height:44px;font-size:.95rem}.ek-demo .aika-paneeli .kal-linkki{padding:10px 12px}}
/* Tallennusnapit ja "Tallenna ja lisää uusi päivä samaan kohteeseen" (Tuntikirjaus.jsx #62, #65) */
.ek-demo .tallennus-napit{display:flex;flex-wrap:wrap;gap:.6rem}
.ek-demo .tallennus-napit .btn-p{flex:1 1 16rem}
.ek-demo .btn-jatka{flex:1 1 16rem;border:1px solid var(--c-accent);border-radius:var(--r-control);padding:.85rem;background:var(--c-surface);color:var(--c-accent);font-weight:500;cursor:pointer;font:inherit}
.ek-demo .btn-jatka:disabled{opacity:.45;cursor:not-allowed}
.ek-demo .jatko-ilmoitus{margin:0 0 1rem;padding:.75rem 1rem;font-size:.85rem;border-radius:var(--r-card);background:var(--c-accent-soft);color:var(--c-text)}
/* Viikkoselaus (ViikkoLista.jsx, viikkonavi.css) */
.ek-demo .viikkonavi{container-type:inline-size;min-width:0;max-width:22rem;margin-bottom:.6rem}
.ek-demo .viikkonavi__rivi{display:grid;grid-template-columns:minmax(min-content,1fr) minmax(0,auto) minmax(min-content,1fr);align-items:center;gap:6px}
.ek-demo .viikkonavi__nappi{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;padding:0 10px;font:inherit;font-size:.78rem;line-height:1.2;cursor:pointer;border:1px solid var(--c-border-m);border-radius:var(--r-control);background:var(--c-surface2);color:var(--c-text)}
.ek-demo .viikkonavi__nappi:hover{background:var(--c-surface);border-color:var(--c-muted)}
.ek-demo .viikkonavi__nappi svg{flex:none;width:1.3em;height:1.3em}
.ek-demo .viikkonavi__edellinen{grid-column:1;padding:0 10px 0 6px}
.ek-demo .viikkonavi__tama{grid-column:2;white-space:nowrap;padding:2px 8px}
.ek-demo .viikkonavi__seuraava{grid-column:3;padding:0 6px 0 10px}
@container (max-width:19rem){.ek-demo .viikkonavi__rivi{gap:4px}.ek-demo .viikkonavi__nappi{font-size:.72rem}.ek-demo .viikkonavi__nappi svg{display:none}.ek-demo .viikkonavi__edellinen,.ek-demo .viikkonavi__seuraava,.ek-demo .viikkonavi__tama{padding:0 6px}}
/* Koonnin rivit työntekijöittäin, joka toinen työntekijä beigellä (#64, #70) */
.ek-demo .e-row.vyo,.ek-demo .hv-row.vyo{background:var(--c-surface2)}
.ek-demo .hv-rivit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem}
.ek-demo .hv-row .row-top{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.ek-demo .hv-row .hv-km{display:block;margin-top:.2rem}
/* Lisätietoja asiakkaalle (KoontiLisatiedot.jsx) */
.ek-demo .lt-kortti{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-card);padding:1rem 1.25rem;margin-bottom:1rem}
.ek-demo .lt-otsikko{display:block;margin:0 0 .5rem;font-size:.95rem;font-weight:600;color:var(--c-text)}
.ek-demo .lt-luku{margin:0;font-size:.88rem;white-space:pre-wrap;overflow-wrap:anywhere}
.ek-demo .lt-kortti textarea{width:100%;min-height:4.5rem;resize:vertical;border:1px solid var(--c-border-m);border-radius:var(--r-field);padding:.6rem .75rem;background:var(--c-surface2);color:var(--c-text);font:inherit;font-size:.9rem}
.ek-demo .lt-ohje{margin:.35rem 0 0;font-size:.75rem;color:var(--c-muted)}
.ek-demo .lt-toiminnot{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.6rem}
.ek-demo .lt-nappi{border:1px solid var(--c-accent);border-radius:var(--r-control);background:var(--c-surface);color:var(--c-accent);padding:.5rem 1rem;font:inherit;font-size:.85rem;font-weight:500;cursor:pointer}
.ek-demo .lt-nappi:disabled{opacity:.45;cursor:default}
.ek-demo .lt-ok{font-size:.8rem;color:var(--c-muted)}
.ek-demo .mail-lisa{background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;padding:14px 18px;margin:18px 0 6px;font-size:.85rem;line-height:1.55}
.ek-demo .mail-lisa b{display:block;margin:0 0 6px}
.ek-demo .mail-lisa div{white-space:pre-wrap;overflow-wrap:anywhere}
/* Hyväksyntäsivu: leima yhteenvetokortissa (hyvaksyntaleima.css hyv-kortti--leima; puhelimessa keskellä) */
.ek-demo .hv .tietolista .stamp{margin:.25rem 0 1.75rem;width:min(260px,92%)}
.ek-demo .hv .tl-pari dd.pre{white-space:pre-wrap}