/* Helppohinta – ajantasaiset artikkelielementit (hp/profiilit, hp/spot, hp/hintamuutokset, hp/siirto, hp/laskuri, hp/yhtio, hp/rinnakkain).
   Ladataan vain sivuille, joilla lohko on. Tokenit periytyvät .hp-article-kääreestä; varat toimivat muualla. */
.hp-article-element{margin:1.75rem 0;clear:both}
.hp-el-title{font-family:var(--hp-font-heading,HPDSKabel,"Segoe UI",Arial,sans-serif);font-weight:600;font-size:1.375rem;line-height:1.25;color:var(--hp-heading,#1c2e2c);margin:0 0 .75rem}
.hp-el-summary{margin:0 0 .9rem;color:var(--hp-ink,#293a38)}
.hp-el-note{font-size:.9375rem;line-height:1.5;color:var(--hp-muted,#53625f);margin:.75rem 0 0;max-width:none}
.hp-el-link{display:inline-block;font-weight:700;color:var(--hp-blue,#192b80);text-decoration:underline;text-underline-offset:.15em}
.hp-el-sub{display:block;font-size:.8125rem;font-weight:400;color:var(--hp-muted,#53625f);line-height:1.35;margin-top:.15rem}
.hp-el-table th[scope=row]{font-weight:700;color:var(--hp-heading,#1c2e2c);text-align:left}
.hp-el-table th[scope=row] a{color:var(--hp-blue,#192b80)}
.hp-el-table td.hp-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hp-el-table tr[data-highlight] th,.hp-el-table tr[data-highlight] td{background:var(--hp-mint,#daf7ec)}
.hp-el-table-compact{font-size:.9375rem}
/* Taulukon kääre myös sivuilla, joilla hp-article.css ei lataudu (vanhat oppaat): skrollaa sivuttain, ei venytä sivua. */
.hp-article-element .hp-table-wrap{border:1px solid var(--hp-line,#d8e2ec);border-radius:var(--hp-radius,14px);background:var(--hp-paper,#fff);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;max-width:100%}
.hp-article-element .hp-table-wrap table{width:100%;margin:0;border-collapse:collapse;line-height:1.4}
.hp-article-element .hp-table-wrap caption{caption-side:top;position:sticky;left:0;max-width:calc(100vw - 2rem - 2px);text-align:left;font-family:var(--hp-font-heading,HPDSKabel,"Segoe UI",Arial,sans-serif);font-weight:600;font-size:1.0625rem;color:var(--hp-heading,#1c2e2c);padding:1rem 1.15rem .75rem}
.hp-article-element .hp-table-wrap thead th{background:var(--hp-surface,#f2f6fa);color:var(--hp-muted,#53625f);font-size:.8125rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:.7rem 1.15rem;border:0;border-top:1px solid var(--hp-line,#d8e2ec);border-bottom:1px solid var(--hp-line,#d8e2ec);vertical-align:bottom}
.hp-article-element .hp-table-wrap td,.hp-article-element .hp-table-wrap tbody th{padding:.8rem 1.15rem;text-align:left;vertical-align:top;border:0;border-top:1px solid var(--hp-line,#d8e2ec)}
.hp-article-element .hp-table-wrap tbody tr:first-child>*{border-top:0}
.hp-article-element .hp-table-wrap tbody tr:nth-child(even){background:var(--hp-surface-2,#f7f9fb)}
.hp-spot-chart{margin:0;padding:1.25rem 1.35rem 1rem;border:1px solid var(--hp-line,#d8e2ec);border-radius:var(--hp-radius,14px);background:var(--hp-paper,#fff)}
.hp-spot-chart figcaption{font-family:var(--hp-font-heading,HPDSKabel,"Segoe UI",Arial,sans-serif);font-weight:600;font-size:1.0625rem;color:var(--hp-heading,#1c2e2c);margin:0 0 .75rem}
.hp-spot-svg{display:block;width:100%;height:auto;max-height:22rem;font-family:inherit;margin:.25rem 0 .5rem}
.hp-spot-svg-mobile{display:none}
.hp-spot-chart{position:relative}
.hp-spot-tip{position:absolute;z-index:2;pointer-events:none;transform:translate(-50%,calc(-100% - 10px));background:var(--hp-heading,#1c2e2c);color:#fff;padding:.5rem .7rem;border-radius:8px;font-size:.875rem;line-height:1.35;white-space:nowrap;box-shadow:0 4px 14px rgba(28,46,44,.22)}
.hp-spot-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--hp-heading,#1c2e2c)}
.hp-spot-tip strong,.hp-spot-tip span{display:block}
.hp-spot-tip strong{font-weight:700;margin-bottom:.1rem;color:#fff!important}
.hp-spot-tip span{color:#fff!important}
.hp-spot-tip[hidden]{display:none}
.hp-spot-readout{min-height:1.6rem;margin:0 0 .2rem;font-size:1rem;font-weight:700;color:var(--hp-heading,#1c2e2c)}
.hp-spot-readout.is-hint{font-weight:400;color:var(--hp-muted,#53625f)}
.hp-spot-svg .hp-spot-bar{cursor:pointer}
.hp-spot-svg.has-active .hp-spot-bar{opacity:.5;transition:opacity .12s}
.hp-spot-svg .hp-spot-bar.is-active{opacity:1;stroke:var(--hp-orange,#eb6e00);stroke-width:3}
.hp-spot-bar{fill:var(--hp-blue,#192b80)}
.hp-spot-bar-neg{fill:var(--hp-orange-ink,#b54d00)}
.hp-spot-bar-low{fill:var(--hp-teal,#147a62)}
.hp-spot-grid{stroke:var(--hp-line,#d8e2ec);stroke-width:1}
.hp-spot-zero{stroke:var(--hp-heading,#1c2e2c);stroke-width:1.5}
.hp-spot-axis{fill:var(--hp-muted,#53625f);font-size:12px}
.hp-spot-ref{stroke:var(--hp-orange,#eb6e00);stroke-width:2;stroke-dasharray:6 4}
.hp-spot-ref-label{fill:var(--hp-orange-ink,#b54d00);font-size:12px;font-weight:700}
.hp-el-details{margin:.5rem 0 0}
.hp-el-details summary{cursor:pointer;font-weight:700;color:var(--hp-blue,#192b80);padding:.35rem 0}
.hp-el-details .hp-table-wrap{margin-top:.5rem}
.hp-el-badge-korotus{color:var(--hp-orange-ink,#b54d00);border-color:var(--hp-orange-ink,#b54d00);background:#fff4ec}
.hp-el-badge-alennus{color:var(--hp-teal,#147a62);border-color:var(--hp-teal,#147a62);background:var(--hp-mint,#daf7ec)}
.hp-el-badge-muutos{color:var(--hp-muted,#53625f)}
.hp-el-changes .hp-badge{margin:0;white-space:nowrap}
.hp-el-table tbody tr.hp-el-group th{background:var(--hp-surface,#f2f6fa);color:var(--hp-muted,#53625f);font-size:.8125rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.55rem 1.15rem}
.hp-el-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem;margin:0 0 1rem;padding:1rem 1.15rem;border:1px solid var(--hp-line,#d8e2ec);border-radius:var(--hp-radius,14px);background:var(--hp-surface,#f2f6fa)}
.hp-el-field{margin:0;display:flex;flex-direction:column;gap:.3rem;min-width:9.5rem;flex:1 1 9.5rem}
.hp-el-field label{font-size:.875rem;font-weight:700;color:var(--hp-heading,#1c2e2c)}
.hp-el-input{display:flex;align-items:center;border:1px solid var(--hp-muted,#53625f);border-radius:var(--hp-radius-small,8px);background:var(--hp-paper,#fff);overflow:hidden}
.hp-el-input:focus-within{outline:3px solid var(--hp-blue,#192b80);outline-offset:1px}
.hp-el-input input{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:.6rem .7rem;font:inherit;font-size:1rem;color:var(--hp-ink,#293a38);font-variant-numeric:tabular-nums;outline:0}
.hp-el-input span{padding:0 .7rem 0 .2rem;font-size:.875rem;color:var(--hp-muted,#53625f);white-space:nowrap}
.hp-el-submit{flex:0 0 auto;min-width:0}
.hp-el-button{appearance:none;border:0;border-radius:var(--hp-radius-button,8px);background:var(--hp-blue,#192b80);color:#fff;font:inherit;font-weight:700;padding:.65rem 1.4rem;cursor:pointer;min-height:2.75rem}
.hp-el-button:hover{background:var(--hp-navy,#101c57)}
.hp-el-button:focus-visible{outline:3px solid var(--hp-blue,#192b80);outline-offset:2px}
.hp-el-result{margin:0 0 .9rem;font-size:1.0625rem;line-height:1.5;color:var(--hp-ink,#293a38)}
.hp-el-result strong{color:var(--hp-heading,#1c2e2c)}
.hp-el-fact-card{border:1px solid var(--hp-line,#d8e2ec);border-radius:var(--hp-radius,14px);background:var(--hp-paper,#fff);overflow:hidden}
.hp-el-fact-head{display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem}
.hp-el-fact-logo{display:block;width:auto;max-width:7.5rem;height:3rem;object-fit:contain;flex:0 0 auto}
.hp-el-fact-name{margin:0;font-family:var(--hp-font-heading,HPDSKabel,"Segoe UI",Arial,sans-serif);font-weight:600;font-size:1.25rem;line-height:1.25;color:var(--hp-heading,#1c2e2c)}
.hp-el-fact-meta{margin:.2rem 0 0;font-size:.9375rem;color:var(--hp-muted,#53625f)}
.hp-el-fact-card .hp-table-wrap{margin:0;border:0;border-top:1px solid var(--hp-line,#d8e2ec);border-radius:0}
.hp-el-side-table thead td{background:var(--hp-surface,#f2f6fa);border-top:1px solid var(--hp-line,#d8e2ec);border-bottom:1px solid var(--hp-line,#d8e2ec)}
.hp-el-side-table thead th[data-highlight]{background:var(--hp-mint,#daf7ec);color:var(--hp-heading,#1c2e2c)}
.hp-el-side-table td{min-width:9rem}
.hp-el-side-cards{display:none}
.hp-article-element ul.hp-el-side-cards{margin:0 0 .9rem;padding:0;list-style:none}
.hp-el-side-card{margin:0 0 .75rem;padding:.9rem 1rem;border:1px solid var(--hp-line,#d8e2ec);border-radius:var(--hp-radius,14px);background:var(--hp-paper,#fff)}
.hp-el-side-card[data-highlight]{background:var(--hp-mint,#daf7ec);border-color:var(--hp-mint,#daf7ec)}
.hp-el-side-card-title{margin:0 0 .35rem;font-family:var(--hp-font-heading,HPDSKabel,"Segoe UI",Arial,sans-serif);font-weight:600;font-size:1.125rem;line-height:1.3;color:var(--hp-heading,#1c2e2c)}
.hp-el-side-card-badge{font-weight:400;font-size:.9375rem;color:var(--hp-muted,#53625f)}
.hp-el-side-card-offer{margin:0 0 .6rem;color:var(--hp-ink,#293a38)}
.hp-el-side-card-facts{margin:0 0 .6rem}
.hp-el-side-card-facts div{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-top:1px solid var(--hp-line,#d8e2ec)}
.hp-el-side-card-facts dt{color:var(--hp-muted,#53625f)}
.hp-el-side-card-facts dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--hp-heading,#1c2e2c)}
@media (max-width:640px){
  .hp-spot-chart{padding:1rem .85rem .75rem}
  .hp-spot-svg-desktop{display:none}
  .hp-spot-svg-mobile{display:block;max-height:none}
  .hp-spot-axis{font-size:13px}
  .hp-spot-ref-label{font-size:13px}
  .hp-el-form{padding:.85rem}
  .hp-el-field{flex-basis:100%}
  .hp-el-submit{flex-basis:100%}
  .hp-el-button{width:100%}
  .hp-el-fact-head{align-items:flex-start}
  .hp-el-side .hp-table-wrap{display:none}
  .hp-el-side-cards{display:block}
}