/* Satamapulssi's daily-report charts (satamapulssi.js). Two categorical
   colours, validated for colour blindness on both surfaces (dataviz
   validator): light #1f6fa8 / #c4622d on #fbfaf6, dark #3a8fd0 / #d9703c on
   #16171a. Every mark also carries a label or a value. */
:root { --sp-a: #1f6fa8; --sp-b: #c4622d; --sp-vyo: #e6e1d6; }
@media (prefers-color-scheme: dark) { :root { --sp-a: #3a8fd0; --sp-b: #d9703c; --sp-vyo: #2a2c31; } }

.sp-kehys { margin: 2.75rem 0; padding-top: 1rem; border-top: 2px solid var(--ink); }
.sp-kehys > figcaption { font: 700 1rem/1.35 var(--sans); margin-bottom: .3rem; }
.sp-kehys > figcaption span { display: block; font-weight: 400; color: var(--muted); font-size: .92rem; margin-top: .15rem; }
.sp-alue { position: relative; font: .85rem/1.45 var(--sans); }
.sp-alue:empty::before { content: "Ladataan satamadataa…"; color: var(--muted); }
.sp-pieni { color: var(--muted); font: .8rem/1.45 var(--sans); margin: .6rem 0 0; }
.sp-vierita { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-valinnat { display: flex; flex-wrap: wrap; gap: 6px; margin: .6rem 0 .3rem; }
.sp-valinnat button { font: 600 .78rem/1 var(--sans); padding: 7px 11px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--ink); cursor: pointer; }
.sp-valinnat button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sp-selite { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: .5rem 0; color: var(--muted); font: .78rem/1.4 var(--sans); }
.sp-selite span { display: inline-flex; align-items: center; gap: 6px; }
.sp-merkki { display: inline-block; width: 16px; height: 3px; background: var(--muted); }
.sp-merkki.tama, .sp-merkki.a { background: var(--sp-a); height: 4px; }
.sp-merkki.b { background: var(--sp-b); height: 10px; width: 10px; border-radius: 2px; }
.sp-merkki.a { height: 10px; width: 10px; border-radius: 2px; }
.sp-merkki.viime { background: var(--ink); height: 1.5px; }
.sp-merkki.vyo { background: var(--sp-vyo); height: 10px; }
.sp-merkki.ka { background: none; border-top: 2px dashed var(--muted); height: 0; }
.sp-vihje {
  position: fixed; z-index: 50; display: none; pointer-events: none; max-width: 280px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink); padding: 8px 10px;
  font: .78rem/1.45 var(--sans); box-shadow: 3px 3px 0 var(--rule);
}

/* Löydökset */
.sp-loydokset { list-style: none; margin: .5rem 0 0; padding: 0; }
.sp-loydokset li { padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.sp-loydokset li:last-child { border-bottom: 0; }
.sp-loydokset strong { font: 700 1.05rem/1.3 var(--serif); }
.sp-loydokset p { margin: .25rem 0 0; font: 1rem/1.5 var(--serif); color: var(--ink-2, var(--ink)); max-width: 40rem; }
.sp-loydokset .paino-3 strong { font-size: 1.2rem; }
.sp-taso { display: inline-block; margin-right: .5rem; padding: 2px 7px; border: 1px solid var(--rule); border-radius: 999px; font: 600 .68rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); vertical-align: 2px; }

/* Taulukot */
.sp-taulu-osa h3 { font: 700 .78rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 1.2rem 0 .3rem; }
.sp-taulu { border-collapse: collapse; width: 100%; min-width: 620px; font: .85rem/1.35 var(--sans); }
.sp-taulu th, .sp-taulu td { text-align: left; padding: .4rem .5rem .4rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.sp-taulu th { font-size: .72rem; color: var(--muted); font-weight: 600; }
.sp-taulu .luku { text-align: right; font-variant-numeric: tabular-nums; }
.sp-alaviite { color: var(--muted); font-size: .78rem; }

/* Viivakaaviot */
.sp-kaavio { display: block; width: 100%; min-width: 560px; height: auto; overflow: visible; }
.sp-akseli { font: 11px var(--sans); fill: var(--muted); }
.sp-akseli.loppu { text-anchor: end; } .sp-akseli.keski { text-anchor: middle; }
.sp-ruudukko { stroke: var(--rule); stroke-width: 1; } .sp-ruudukko.sata { stroke: var(--muted); stroke-dasharray: 3 3; }
.sp-vyo { fill: var(--sp-vyo); }
.sp-ka { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sp-viime { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .55; }
.sp-tama { fill: none; stroke: var(--sp-a); stroke-width: 2.5; stroke-linejoin: round; }
.sp-kohdistin { stroke: var(--muted); stroke-dasharray: 3 3; }
.sp-viiva { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.sp-viiva.sp-a { stroke: var(--sp-a); } .sp-viiva.sp-b { stroke: var(--sp-b); }
.sp-piste { stroke: var(--paper); stroke-width: 2; } .sp-piste.sp-a { fill: var(--sp-a); } .sp-piste.sp-b { fill: var(--sp-b); }
.sp-suora { font: 600 12px var(--sans); fill: var(--ink); }

/* Maat × vuodet */
.sp-matriisi { border-collapse: collapse; min-width: 560px; width: 100%; font: .82rem/1.3 var(--sans); }
.sp-matriisi th, .sp-matriisi td { padding: .35rem .3rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.sp-matriisi thead th { font-size: .72rem; color: var(--muted); font-weight: 600; text-align: center; }
.sp-matriisi tbody th { text-align: left; font-weight: 600; position: sticky; left: 0; background: var(--paper); }
.sp-matriisi td { text-align: center; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--sp-a) var(--osuus, 0%), transparent); }
.sp-matriisi td.tyhja { color: var(--muted); }
.sp-matriisi td:hover { outline: 2px solid var(--ink); outline-offset: -2px; }

/* Satamat */
.sp-palkit { list-style: none; margin: .4rem 0 0; padding: 0; }
.sp-palkit li { display: grid; grid-template-columns: minmax(130px, 220px) 1fr 56px; gap: 10px; align-items: center; padding: 3px 0; }
.sp-palkki { display: flex; gap: 2px; height: 12px; }
.sp-palkki i { display: block; height: 100%; }
.sp-palkki i:last-child { border-radius: 0 4px 4px 0; }
.sp-palkki .sp-a { background: var(--sp-a); } .sp-palkki .sp-b { background: var(--sp-b); }
.sp-maara { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 40rem) { .sp-palkit li { grid-template-columns: 110px 1fr 48px; } }