/* ===== Värit ja perusarvot ===== */
:root {
  color-scheme: light dark;

  --pohja: #E6ECEA;      /* sivun tausta, utuinen järvenharmaa */
  --pinta: #F4F7F6;      /* osioiden tausta */
  --muste: #1C2A31;      /* teksti */
  --himmea: #56676F;     /* toissijainen teksti */
  --viiva: #C9D4D2;      /* erottimet */
  --jarvi: #2B5D77;      /* korostus: valinnat, fokus */

  /* Pörssisähkön hintaluokat */
  --vihrea: #3E9658;
  --keltainen: #D6AE2B;
  --oranssi: #DC792E;
  --punainen: #C23B38;
  --tumma: #7A1E2B;

  --fontti: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --pyoristys: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pohja: #121B20;
    --pinta: #19242A;
    --muste: #E2E9EB;
    --himmea: #93A4AB;
    --viiva: #2A3940;
    --jarvi: #83B6D1;
    --tumma: #B04A5C;
  }
}

/* ===== Perusta ===== */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pohja);
  color: var(--muste);
  font-family: var(--fontti);
  font-size: 1rem;
  line-height: 1.45;
}

:focus-visible {
  outline: 2px solid var(--jarvi);
  outline-offset: 2px;
}

button { font: inherit; color: inherit; }

.sivu {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

/* ===== Yläosa: kello ja pikalinkit ===== */
.yla {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
}

.kello {
  display: block;
  font-size: clamp(3.2rem, 8vw, 6rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.03em;
  /* Tasalevyiset numerot vain kelloon, ettei se hypi sekuntien vaihtuessa.
     Muualla ne leventäisivät myös pisteitä ja pilkkuja. */
  font-variant-numeric: tabular-nums;
}

.kello-sekunnit {
  color: var(--himmea);
  font-weight: 500;
}

.paivamaara {
  margin: .6rem 0 0;
  color: var(--himmea);
  font-size: 1.05rem;
}

.pikalinkit {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.pikalinkki {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem .5rem .6rem;
  background: var(--pinta);
  color: var(--muste);
  border: 1px solid var(--viiva);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;

  &:hover { border-color: var(--jarvi); }

  & img, & .kirjain {
    width: 20px;
    height: 20px;
    border-radius: 4px;
  }
}

.kirjain {
  display: inline-grid;
  place-items: center;
  background: var(--jarvi);
  color: var(--pinta);
  font-size: .75rem;
  font-weight: 700;
}

/* ===== Tiivistelmä: sivun "sankari" ===== */
.tiivistelma {
  max-width: 34ch;
  min-height: 2.5em;
  margin: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* ===== Ruudukko ===== */
.ruudukko {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "saa" "sahko" "uutiset";
}

@media (min-width: 900px) {
  .ruudukko {
    grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "saa   uutiset"
      "sahko uutiset";
    grid-template-rows: auto 1fr;
    align-items: start;
  }
}

.saa { grid-area: saa; }
.sahko { grid-area: sahko; }
.uutiset { grid-area: uutiset; }

.osio {
  container-type: inline-size;
  background: var(--pinta);
  border-radius: var(--pyoristys);
  padding: 1.25rem;
}

.osio-otsikko {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: 1rem;

  & h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
  }
}

.ilmoitus {
  margin: 0;
  color: var(--himmea);
  font-size: .9rem;
}

.huomio {
  margin: .5rem 0 0;
  color: var(--himmea);
  font-size: .8rem;
}

/* Alasvetovalikko, joka näyttää otsikon osalta */
.valinta-kehys {
  position: relative;

  &::after {
    content: "▾";
    position: absolute;
    right: 0;
    top: 50%;
    translate: 0 -50%;
    color: var(--jarvi);
    pointer-events: none;
  }
}

.valinta {
  appearance: none;
  font: inherit;
  font-weight: 700;
  color: var(--jarvi);
  background: transparent;
  border: 0;
  border-bottom: 2px solid currentColor;
  padding: 0 1.1rem 1px 0;
  cursor: pointer;

  & option { color: var(--muste); background: var(--pinta); }
}

/* ===== Ikonit ===== */
.ikoni {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;

  & .tayte { fill: var(--pinta); }
  & .piste { stroke-width: 2.6; }
}

/* ===== Sää ===== */
.saa-nyt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
}

.saa-iso-ikoni .ikoni { width: 64px; height: 64px; }

.saa-lampo {
  margin: 0;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

.saa-kuvaus { margin: .3rem 0 0; }

.saa-tiedot {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin: .2rem 0 0;
  color: var(--himmea);
  font-size: .9rem;
}

.saa-tunnit {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--viiva);
  list-style: none;
  text-align: center;

  & .ikoni { width: 24px; height: 24px; display: block; margin: .25rem auto; }
}

.saa-klo { color: var(--himmea); font-size: .8rem; }

.saa-paivat {
  margin: 1rem 0 0;
  padding: .75rem 0 0;
  border-top: 1px solid var(--viiva);
  list-style: none;
}

.saa-paiva {
  display: grid;
  grid-template-columns: 3.5rem 24px 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .3rem 0;

  & .ikoni { width: 22px; height: 22px; }
}

.saa-paiva-kuvaus {
  color: var(--himmea);
  font-size: .9rem;
  visibility: hidden;
}

.saa-minmax { font-weight: 500; }
.saa-min { color: var(--himmea); margin-right: .6rem; }

@container (min-width: 380px) {
  .saa-paiva-kuvaus { visibility: visible; }
}

/* ===== Pörssisähkö ===== */
.valitsin {
  display: inline-flex;
  padding: 3px;
  background: var(--pohja);
  border-radius: 999px;

  & button {
    padding: .3rem .8rem;
    font-size: .85rem;
    color: var(--himmea);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
  }

  & button[aria-pressed="true"] {
    color: var(--muste);
    background: var(--pinta);
    font-weight: 700;
  }

  & button:disabled {
    opacity: .45;
    cursor: default;
  }
}

.sahko-luvut {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin: 0 0 1.25rem;

  & dt { color: var(--himmea); font-size: .8rem; }
  & dd { margin: 0; font-size: 1.2rem; font-weight: 700; }
  & small { display: block; color: var(--himmea); font-size: .8rem; font-weight: 400; }
}

.kaavio {
  position: relative;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: 100%;
  align-items: end;
  gap: 2px;
  height: 150px;
  padding-right: 1.6rem;
  border-bottom: 1px solid var(--viiva);
}

.palkki {
  height: var(--k);
  min-height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px 2px 0 0;
  background: var(--vari);
  cursor: pointer;

  &:hover, &:focus-visible { filter: brightness(1.12); }

  &.nyt {
    outline: 2px solid var(--muste);
    outline-offset: 1px;
  }
}

.raja-viiva {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--viiva);
  pointer-events: none;

  & span {
    position: absolute;
    right: 0;
    bottom: 1px;
    padding-left: .25rem;
    font-size: .7rem;
    color: var(--himmea);
    background: var(--pinta);
  }
}

.kaavio-akseli {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  margin-top: .3rem;
  padding-right: 1.6rem;
  font-size: .7rem;
  color: var(--himmea);
  white-space: nowrap;
}

.sahko-lukema {
  min-height: 1.45em;
  margin: .9rem 0 0;
  font-size: .95rem;
}

.selite {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .8rem;
  color: var(--himmea);

  & li { display: inline-flex; align-items: center; gap: .35rem; }
}

.selite-vari {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--vari);
}

/* ===== Uutiset ===== */
.valilehdet {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--viiva);

  & button {
    margin-bottom: -1px;
    padding: .4rem .55rem;
    font-size: .9rem;
    color: var(--himmea);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
  }

  & button[aria-pressed="true"] {
    color: var(--muste);
    border-bottom-color: var(--jarvi);
    font-weight: 700;
  }
}

.uutislista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uutinen {
  & + & a { border-top: 1px solid var(--viiva); }

  & a {
    display: block;
    padding: .7rem 0;
    color: inherit;
    text-decoration: none;
  }

  & a:hover .uutinen-otsikko { text-decoration: underline; text-underline-offset: 3px; }
  & a:visited .uutinen-otsikko { color: var(--himmea); }
}

.uutinen-otsikko {
  display: block;
  max-width: 70ch;
  font-weight: 500;
}

.uutinen-tiedot {
  display: flex;
  gap: .75rem;
  margin-top: .15rem;
  font-size: .8rem;
  color: var(--himmea);
}

.uutis-virheet {
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .85rem;
  color: var(--himmea);
}

/* Laitteiden halvimmat käynnistysajat */
.ajastukset {
  display: grid;
  gap: .75rem;
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--viiva);
}

.ajastus {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 1rem;

  & dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: right;
  }
}

.ajastus-tiedot {
  grid-column: 1 / -1;
  margin: .1rem 0 0;
  font-size: .8rem;
  color: var(--himmea);
}