/* SKH 2026 — vastuunjakotaulukko.
   Ladataan vain sivuilla, joiden sisällössä on .skh-vastuunjako (ks. functions.php).
   Kaikki luokat vj-alkuisia ja elementtivalitsimet rajattu säiliön sisään,
   jotta teeman muut tyylit eivät törmää. */

.skh-vastuunjako{
  --vj-line:#DCE6EA;
  --vj-surface:#FFFFFF;
  --vj-note:#F2F7F9;
  --vj-chip:#F2F7F9;
  --vj-muted:#3F5666;
  --vj-yhtio:#02505F;      --vj-yhtio-soft:#E4F1F5;
  --vj-osakas:#8F4420;     --vj-osakas-soft:#FAF0E8;
  display:flex;flex-direction:column;gap:30px;
  font-size:16px;line-height:1.55;
}
.skh-vastuunjako [hidden]{display:none !important}
.skh-vastuunjako *{box-sizing:border-box}

/* Selitteet */
.skh-vastuunjako .vj-legend{display:flex;gap:22px;flex-wrap:wrap;font-weight:600;font-family:var(--display)}
.skh-vastuunjako .vj-legend span{display:inline-flex;align-items:center;gap:8px}
.skh-vastuunjako .vj-dot{width:12px;height:12px;border-radius:2px;display:inline-block;flex:none}
.skh-vastuunjako .vj-dot-y{background:var(--vj-yhtio)}
.skh-vastuunjako .vj-dot-o{background:var(--vj-osakas)}
.skh-vastuunjako .vj-ly{color:var(--vj-yhtio)}
.skh-vastuunjako .vj-lo{color:var(--vj-osakas)}

/* Periaatekortit */
.skh-vastuunjako .vj-periaatteet{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.skh-vastuunjako .vj-p{background:var(--vj-surface);border:1px solid var(--vj-line);border-radius:var(--r,4px);padding:18px 20px;min-width:0}
.skh-vastuunjako .vj-p h3{font-family:var(--display);font-size:1rem;font-weight:600;margin:0 0 6px;line-height:1.25}
.skh-vastuunjako .vj-p p{margin:0;color:var(--vj-muted);font-size:.93rem;line-height:1.5}
.skh-vastuunjako .vj-ref{display:block;margin-top:10px;font-family:var(--display);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-deep)}

/* Hakupalkki ja osiovalinta */
.skh-vastuunjako .vj-tools{position:sticky;top:82px;z-index:3;background:var(--paper);padding:14px 0 12px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--vj-line)}
.skh-vastuunjako .vj-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.skh-vastuunjako .vj-sr{position:absolute;left:-9999px}
.skh-vastuunjako #vj-haku{flex:1 1 280px;min-width:0;font-family:var(--body);font-size:1rem;padding:12px 15px;border:1px solid var(--vj-line);border-radius:var(--r,4px);background:var(--vj-surface);color:var(--ink)}
.skh-vastuunjako #vj-haku:focus-visible,
.skh-vastuunjako .vj-btn:focus-visible,
.skh-vastuunjako .vj-chips button:focus-visible,
.skh-vastuunjako summary:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:2px}
.skh-vastuunjako .vj-btn{font-family:var(--display);font-size:.95rem;font-weight:500;border:1px solid var(--vj-line);background:var(--vj-surface);color:var(--ink);border-radius:var(--r,4px);padding:11px 18px;cursor:pointer}
.skh-vastuunjako .vj-btn:hover{border-color:var(--cyan);background:var(--vj-note)}
.skh-vastuunjako .vj-chips{display:flex;flex-wrap:wrap;gap:6px}
.skh-vastuunjako .vj-chips button{font-family:var(--body);font-size:.86rem;line-height:1.3;border:1px solid var(--vj-line);background:var(--vj-surface);color:var(--ink);border-radius:999px;padding:5px 13px;cursor:pointer}
.skh-vastuunjako .vj-chips button:hover{border-color:var(--cyan)}
.skh-vastuunjako .vj-chips button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Osiot ja taulukot */
.skh-vastuunjako #vj-lista{display:flex;flex-direction:column;gap:40px}
.skh-vastuunjako .vj-section{display:flex;flex-direction:column;gap:12px;scroll-margin-top:150px}
.skh-vastuunjako .vj-section h2{font-size:clamp(1.45rem,2.4vw,1.85rem);font-weight:400}
.skh-vastuunjako .vj-num{color:var(--cyan-deep);font-variant-numeric:tabular-nums;margin-right:10px}
.skh-vastuunjako .vj-intro{margin:0;max-width:75ch;color:var(--vj-muted);font-size:.98rem}
.skh-vastuunjako .vj-tbl{overflow-x:auto;background:var(--vj-surface);border:1px solid var(--vj-line);border-radius:var(--r,4px)}
.skh-vastuunjako table{width:100%;border-collapse:collapse;font-size:.95rem;margin:0}
.skh-vastuunjako th,
.skh-vastuunjako td{text-align:left;vertical-align:top;padding:13px 15px;border-top:1px solid var(--vj-line)}
.skh-vastuunjako thead th{border-top:0;font-family:var(--display);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.skh-vastuunjako th.vj-k,
.skh-vastuunjako td.vj-k{width:30%;font-weight:600}
.skh-vastuunjako th.vj-ty{color:var(--vj-yhtio);background:var(--vj-yhtio-soft)}
.skh-vastuunjako th.vj-os{color:var(--vj-osakas);background:var(--vj-osakas-soft)}
.skh-vastuunjako td.vj-ty{color:var(--vj-yhtio)}
.skh-vastuunjako td.vj-os{color:var(--vj-osakas)}
.skh-vastuunjako td .vj-none{color:#8C9BA5}
.skh-vastuunjako td .vj-full{font-weight:600}
.skh-vastuunjako .vj-huom{display:block;font-weight:400;color:var(--vj-muted);font-size:.86rem;margin-top:6px}
.skh-vastuunjako tr.vj-sub td{background:var(--vj-note);font-family:var(--display);font-weight:600;font-size:1rem}
.skh-vastuunjako tr.vj-sel td{border-top:0;padding-top:0}
.skh-vastuunjako details{background:var(--vj-note);border-radius:var(--r,4px);padding:9px 13px}
.skh-vastuunjako summary{cursor:pointer;font-family:var(--display);font-size:.88rem;font-weight:600;color:var(--cyan-deep)}
.skh-vastuunjako .vj-txt{margin-top:9px;max-width:80ch;font-size:.94rem}
.skh-vastuunjako .vj-txt p{margin:0 0 .7em;color:var(--ink)}
.skh-vastuunjako .vj-txt p:last-child{margin-bottom:0}
.skh-vastuunjako .vj-empty{color:var(--vj-muted);padding:28px;text-align:center;border:1px solid var(--vj-line);border-radius:var(--r,4px)}
.skh-vastuunjako .vj-foot{color:var(--vj-muted);font-size:.88rem;border-top:1px solid var(--vj-line);padding-top:18px}

/* Mobiili: taulukko puretaan korteiksi */
@media (max-width:680px){
  /* Osiovalinta vie mobiilissa paljon tilaa, joten palkki ei jää kiinni ruudun ylälaitaan */
  .skh-vastuunjako .vj-tools{position:static}
  .skh-vastuunjako .vj-chips button{font-size:.82rem;padding:4px 11px}
  .skh-vastuunjako #vj-haku{flex:1 1 100%}
  .skh-vastuunjako .vj-btn{width:100%}
  .skh-vastuunjako thead{display:none}
  .skh-vastuunjako table,
  .skh-vastuunjako tbody,
  .skh-vastuunjako tr:not([hidden]),
  .skh-vastuunjako td{display:block;width:100%}
  .skh-vastuunjako tr{border-top:1px solid var(--vj-line);padding:8px 0}
  .skh-vastuunjako tr.vj-sel{border-top:0;padding-top:0}
  .skh-vastuunjako td{border:0;padding:5px 15px}
  .skh-vastuunjako th.vj-k,
  .skh-vastuunjako td.vj-k{width:100%}
  .skh-vastuunjako td.vj-ty::before{content:"Taloyhtiö: ";font-weight:600}
  .skh-vastuunjako td.vj-os::before{content:"Osakas: ";font-weight:600}
}