:root {
  --width: 36;
  --gap: 1rem;
  --rounding: 4px;
  --accent: #696;
  --background: #eee;
  --content-background: #fff;
  --content-text: #000;
  --heading-background: #aaa;
  --heading-text: #fff;
  --selected-background: #fffc;
  --help-background: #aaa;
  --help-text: #fff;
  --unit-opacity: 0.4;
  --heading-unit-opacity: 0.6;
  --pie-chart-radius: 145px;
  --graph-axis: #ddd;
  --graph-line: #f4f4f4;
  --graph-highlight: #0001;
  --key-line: #999;
  --table-stripe: #f8f8f8;
}

@media screen and (min-width:840px) {
  :root {
    --gap: 2rem;
  }
}

.generation      { color: #aaa; }
.price           { color: #000; }
.emissions       { color: #000; }
.demand          { color: #000; }
.fossils         { color: #c45; }
.renewables      { color: #5b5; }
.others          { color: #27c; }
.transfers       { color: #aaa; }
.lignite         { color: #a63; }
.hardCoal        { color: #a35; }
.gas             { color: #e94; }
.solar           { color: #ed0; }
.wind            { color: #9d5; }
.hydro           { color: #2cb; }
.biomass         { color: #36b; }
.other           { color: #b85; }
.pumped          { color: #09c; }
.austria         { color: #c53; }
.belgium         { color: #817; }
.czechRepublic   { color: #47a; }
.denmark         { color: #d15; }
.france          { color: #38b; }
.luxembourg      { color: #4bc; }
.netherlands     { color: #f82; }
.norway          { color: #159; }
.poland          { color: #e56; }
.sweden          { color: #db3; }
.switzerland     { color: #a33; }

@media (prefers-color-scheme:dark) {
  :root {
    --background: #111;
    --content-background: #222;
    --content-text: #eee;
    --heading-background: #444;
    --selected-background: #222c;
    --help-background: #444;
    --graph-axis: #444;
    --graph-line: #2a2a2a;
    --graph-highlight: #fff1;
    --key-line: #666;
    --unit-opacity: 0.6;
    --table-stripe: #181818;
  }

  .generation { color: #888; }
  .price      { color: #eee; }
  .emissions  { color: #eee; }
  .demand     { color: #eee; }
  .transfers  { color: #888; }
}

*, ::before, ::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  font-family: -apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-weight: 300;
  font-size: clamp(18px, calc(100vw / var(--width)), 20px);
  font-feature-settings: 'tnum';
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  margin: 0;
  padding: 1.5rem var(--gap) 0;
  background: var(--background);
  color: var(--content-text);
}

header {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  text-align: center;

  h1, p {
    margin: 0 0 1rem;
  }

  h1 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
  }

  span {
    white-space: nowrap;
  }

  a:last-child {
    margin-left: 0.5rem;
    padding: 2px 0.5rem;
    border-radius: 0.75rem;
    background: var(--heading-background);
    color: var(--heading-text);
    font-weight: 400;
    text-decoration: none;
  }
}

main, footer {
  display: grid;
  gap: var(--gap);
  max-width: 1280px;
  margin: 0 auto;
}

main {
  padding-top: 0.5rem;
  font-size: 18px;
  line-height: 1.25;

  @media screen and (max-width:459px) {
    font-size: 16px;
  }
}

footer {
  display: grid;
  gap: var(--gap);
  padding-block: var(--gap);
  font-size: 1rem;
  line-height: 1.5;

  @media screen and (min-width:960px) {
    grid-template-columns: 1fr 1fr;
  }
}

section, #live dl {
  padding: 1rem;
  border-radius: var(--rounding);
  background: var(--content-background);
  color: var(--content-text);
}

h2 {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;

  main &, footer & {
    margin: -1rem -1rem 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--rounding) var(--rounding) 0 0;
    background: var(--heading-background);
    color: var(--heading-text);
  }
}

h3 {
  margin: 2rem 0 1rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 300;
  text-align: center;

  &:first-of-type {
    margin-top: 0;
  }
}

p {
  margin: 0;

  + p {
    margin-top: 1rem;
  }

  + div {
    margin-block: 1rem;
  }
}

table {
  border-collapse: collapse;
}

a {
  color: var(--accent);
  text-decoration-color: transparent;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.2s;

  &:hover {
    text-decoration-color: var(--accent);
  }
}

path {
  fill: transparent;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#live {
  display: grid;
  gap: var(--gap);
  overflow: hidden;

  @media screen and (min-width:1360px) {
    --pie-chart-radius: 221px;
  }

  > div {
    grid-column: 1 / -1;
  }

  > :first-child {
    display: grid;
    grid-row: 1;
    gap: var(--gap);
  }

  @media screen and (min-width:768px) {
    grid-template-columns: 1fr 1fr;
  }

  @media screen and (min-width:840px) {
    grid-template-columns: 1fr calc(2 * var(--pie-chart-radius) + 4rem) 1fr;

    > :first-child {
      grid-template-columns: 1fr 1fr;
    }
  }
}

[role="tablist"] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  position: sticky;
  top: 0;
  z-index: 1;
  margin: -1rem -1rem 1rem;

  h2 {
    margin: 0;
    border-radius: 0;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;

    &:first-child {
      border-top-left-radius: var(--rounding);
    }

    &:last-child {
      border-top-right-radius: var(--rounding);
    }

    &[aria-selected="true"] {
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
      background: var(--selected-background);
      color: var(--content-text);
      cursor: auto;
    }

    @media screen and (max-width:549px) {
      text-transform: capitalize;

      span {
        display: none;
      }
    }
  }
}

[role="tabpanel"] {
  --table-width: 305px;
  display: grid;
  gap: 1rem 3rem;

  @media screen and (min-width:768px) {
    grid-template-columns: var(--table-width) 1fr;
    grid-template-areas: "pie price" "status emissions" "equation emissions" "table emissions" "table demand" "table generation" "table transfers";
  }

  @media screen and (min-width:1139px) {
    grid-template-columns: 1fr var(--table-width) 1fr;
    grid-template-areas: "pie status demand" "pie equation demand" "pie table demand" "price table generation" "emissions table transfers";
  }

  &:nth-child(n + 3) {
    display: none;
  }

  > div {
    min-width: 0;
  }

  @media screen and (min-width:768px) {
    > :nth-child(1) { grid-area: status; }
    > :nth-child(2) { grid-area: equation; }
    > :nth-child(3) { grid-area: pie; }
    > :nth-child(4) { grid-area: table; }
    > :nth-child(5) { grid-area: price; }
    > :nth-child(6) { grid-area: emissions; }
    > :nth-child(7) { grid-area: demand; }
    > :nth-child(8) { grid-area: generation; }
    > :nth-child(9) { grid-area: transfers; }
  }

  > :is(:nth-child(1),:nth-child(2)) {
    padding-bottom: 1rem;
  }

  @media screen and (max-width:767px) {
    > :is(:nth-child(3),:nth-child(4)) {
      padding-bottom: 1rem;
    }
  }

  > :is(:nth-child(1),:nth-child(2),:nth-child(4)) {
    width: 100%;
    max-width: var(--table-width);
    justify-self: center;
  }

  > :nth-child(3) {
    align-self: center;
  }
}

dl {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  text-align: center;

  &::before, &::after {
    content: ' ';
    grid-area: 1 / 1 / 3 / 3;
    font-size: 1.25rem;
    line-height: 0.75rem;
  }

  &::after {
    grid-area: 1 / 2 / 3 / 4;
  }

  &[data-operator] {
    &::before { content: '='; }
    &::after  { content: attr(data-operator); }
  }

  dt, dd {
    margin: 0;
    line-height: 1;
    white-space: nowrap;
  }

  dt {
    grid-row: 1;
  }

  dd {
    grid-row: 2;
    font-size: 1.2em;

    abbr {
      opacity: var(--unit-opacity);
    }
  }

  dt:nth-child(1), dd:nth-child(2) { grid-column: 1; }
  dt:nth-child(3), dd:nth-child(4) { grid-column: 2; }
  dt:nth-child(5), dd:nth-child(6) { grid-column: 3; }

  #live & {
    padding-inline: 0;

    @media screen and (min-width:840px) and (max-width:1359px) {
      grid-template-columns: 1fr;
      align-content: center;
      justify-items: start;

      + dl {
        justify-items: end;
      }

      dt, dd, &[data-operator]::before, &[data-operator]::after {
        width: calc(50vw - var(--pie-chart-radius) - 2 * var(--gap));
      }

      dt, dd {
        grid-column: 1;
      }

      dt:nth-child(1) { grid-row: 1; }
      dd:nth-child(2) { grid-row: 2; }
      dt:nth-child(3) { grid-row: 4; }
      dd:nth-child(4) { grid-row: 5; }
      dt:nth-child(5) { grid-row: 7; }
      dd:nth-child(6) { grid-row: 8; }

      &::before { grid-area: 3 / 1; }
      &::after  { grid-area: 6 / 1; }
    }
  }

  [role="tabpanel"] & {
    dd {
      font-size: 18px;
    }

    /* The first value here is the period description, which in German runs
       to a good deal more than the English it replaces ("Vergangene Woche"
       against "Past week"). Left unwrapped it sets a minimum width wider
       than a third of a phone screen, pushing the emissions column off the
       right-hand edge, so this one value is allowed to wrap. */
    dd:nth-child(2) {
      white-space: normal;
    }
  }
}

.sources {
  display: grid;
  grid-template-columns: max-content 1fr repeat(2, max-content);

  table, thead, tbody, tr {
    display: grid;
    grid-template-columns: subgrid;
    grid-column-end: span 4;
  }

  tr {
    display: grid;
    grid-template-columns: subgrid;
    gap: 0.5rem;

    :nth-child(3), :nth-child(4) {
      text-align: right;
      white-space: nowrap;
    }

    :nth-child(3)::after {
      content: 'GW';
      opacity: var(--unit-opacity);
    }

    :nth-child(4)::after {
      content: '%';
      opacity: var(--unit-opacity);
    }
  }

  th, td {
    padding: 0;
  }

  td + td {
    color: var(--content-text);
  }

  #live & {
    gap: var(--gap);

    @media screen and (min-width:768px) {
      grid-template-columns: max-content 1fr repeat(3, max-content) 1fr repeat(2, max-content);
      grid-row: 2;

      .fossils         { grid-area: 1 / 1 / 2 / 5; }
      .renewables      { grid-area: 2 / 1 / 3 / 5; }
      .others          { grid-area: 3 / 1 / 4 / 5; }
      .interconnectors { grid-area: 3 / 5 / 5 / 9; }
      .storage         { grid-area: 4 / 1 / 5 / 5; }
    }

    @media screen and (min-width:840px) {
      .fossils         { grid-area: 1 / 1 / 2 / 5; }
      .renewables      { grid-area: 2 / 1 / 3 / 5; }
      .others          { grid-area: 3 / 1 / 4 / 5; }
      .interconnectors { grid-area: 1 / 5 / 3 / 9; }
      .storage         { grid-area: 3 / 5 / 4 / 9; }
    }

    @media screen and (min-width:1220px) and (max-width:1359px) {
      grid-template-columns: max-content 1fr repeat(3, max-content) 1fr repeat(3, max-content) 1fr repeat(2, max-content);

      .renewables      { grid-area: 2 / 1 / 4 / 5; }
      .others          { grid-area: 1 / 5 / 3 / 9; }
      .storage         { grid-area: 3 / 5 / 4 / 9; }
      .interconnectors { grid-area: 1 / 9 / 4 / 13; }
    }

    @media screen and (min-width:1360px) {
      grid-template-columns: repeat(3, max-content) 1fr 1fr repeat(3, max-content);
      gap: 0;

      .fossils, .interconnectors {
        border-radius: var(--rounding) var(--rounding) 0 0;
      }

      .others, .storage {
        border-radius: 0 0 var(--rounding) var(--rounding);
      }
    }

    .transfers {
      color: var(--heading-background);
    }

    table {
      align-content: start;
      overflow: hidden;
      background: var(--content-background);

      @media screen and (max-width:1359px) {
        border-radius: var(--rounding);
      }
    }

    thead tr {
      --unit-opacity: var(--heading-unit-opacity);
      background: currentColor;
    }

    tr {
      padding: 0.5rem;
    }

    tr + tr {
      padding-top: 0;
    }

    th, td {
      grid-row: 1;
      line-height: 30px;

      &:nth-child(2) {
        text-align: left;
      }

      @media screen and (min-width:1360px) {
        &:nth-child(2) {
          grid-column: 4;
        }

        .transfers & {
          &:nth-child(2) { grid-column: 1; text-align: right; }
          &:nth-child(3) { grid-column: 3; }
          &:nth-child(4) { grid-column: 2; }

          &:nth-child(2):not(:has([data-help])) {
            padding-right: 1.2em;
          }
        }
      }
    }

    th {
      color: var(--heading-text);
      font-weight: 400;
    }

    td:nth-child(1) {
      background: currentColor;
      padding-top: 2px;

      svg {
        display: block;
        width: 30px;
        height: 28px;
      }

      path {
        stroke: var(--content-background);
      }

      .transfers & {
        display: grid;
        background: transparent;

        &::before {
          content: '';
          grid-area: 1 / 1;
          background: var(--graph-axis);
          height: 2px;
          margin-top: 13px;
        }

        svg {
          grid-area: 1 / 1;
          margin-block: 0;
        }

        path {
          stroke: currentColor;
        }
      }
    }
  }

  [role="tabpanel"] & {
    > * {
      grid-column: 1 / -1;
    }

    tr + tr {
      padding-top: 1em;
    }

    td {
      line-height: 1;

      &:nth-child(1)::after {
        content: '';
        display: block;
        width: 1em;
        height: 1em;
        background: currentColor;
      }

      .transfers &:nth-child(1)::after {
        border: 2px solid;
        background: transparent;
      }
    }
  }
}

[data-help] {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: var(--help-background);
  color: var(--help-text);
  font-weight: 400;
  font-variant: small-caps;
  line-height: 1;
  text-align: center;
  cursor: pointer;

  &::after {
    content: '?';
    position: relative;
    top: -1px;
  }
}

.pie-chart {
  display: grid;
  padding: 1px;
  background: var(--content-background);
  border-radius: 50%;
  font-size: 16px;

  /* the chart itself and its label stay pinned to the true circle diameter
     and centred, even where the card around them (below) stretches taller
     than that circle to reach the tables on either side — border-radius:50%
     on a box taller than it is wide draws a capsule, its straight sides
     framing the circle and its curved ends touching the tables beyond */
  > div, svg {
    grid-area: 1 / 1;
    width: calc(2 * var(--pie-chart-radius));
    height: calc(2 * var(--pie-chart-radius));
    align-self: center;
    justify-self: center;
  }

  > div {
    display: grid;
    justify-items: center;
    align-content: center;
    text-align: center;

    div:nth-child(1) {
      padding-top: 1.25em;
    }

    div:nth-child(2) {
      display: block;
      width: 35%;
      height: 2px;
      margin: 0.25em 0;
      background: currentColor;
    }
  }

  path {
    fill: currentColor;
    stroke: var(--content-background);
  }

  #live & {
    grid-row: 2;

    @media screen and (max-width:839px) {
      place-self: start center;
      width: calc(2 * var(--pie-chart-radius));
    }

    @media screen and (min-width:768px) {
      grid-column: 2;
    }

    @media screen and (min-width:840px) {
      grid-area: 1 / 2 / 2 / 3;
      margin-block: -2rem;
      border: 2rem solid var(--background);
    }

    @media screen and (min-width:1360px) {
      grid-area: 2 / 2 / 3 / 3;
      font-size: 1rem;

      /* Here the chart shares a row with the source tables, and Germany's
         eleven interconnectors make that row far taller than the chart is
         wide, so a card stretched to fill it would be drawn as an ellipse.
         The card is therefore transparent, letting the tables' own white
         background carry straight through behind the chart, and the ring
         is drawn around the circle itself: a round emblem inset into the
         card, which is how it reads upstream where the tables happen to be
         about as tall as the chart is wide. */
      margin-block: 0;
      border: 0;
      background: transparent;

      /* the background and ring go on the label layer, which sits below the
         chart, so that the tables' header bars are clipped by the circle
         instead of showing through the doughnut's hole, without the chart
         covering the label */
      > div {
        border-radius: 50%;
        background: var(--content-background);
        box-shadow: 0 0 0 2rem var(--background);
      }
    }
  }

  [role="tabpanel"] & {
    width: calc(2 * var(--pie-chart-radius));
    max-width: 100%;
    margin: auto;
  }
}

.graph {
  --graph-height: 252px;
  --axis-width: 40px;
  --axis-height: 64px;
  --axis-gap: 10px;
  --key-padding: 8px;
  display: grid;
  grid-template: auto var(--axis-height) / var(--axis-width) 1fr;
  gap: calc(var(--axis-gap) - 0.5em) var(--axis-gap);
  position: relative;
  font-size: 12px;
  line-height: 1;

  > div {
    display: grid;
    text-align: right;
  }

  > :nth-child(1) {
    grid-area: 1 / 1 / 2 / 3;
    grid-template-columns: subgrid;
    align-content: space-between;

    > :nth-child(even) {
      margin-top: calc(0.5em - 1px);
      border-top: 2px solid var(--graph-line);

      &.axis {
        border-color: var(--graph-axis);
      }
    }
  }

  > :nth-child(2) {
    grid-area: 2 / 2 / 3 / 3;
    grid-auto-flow: column;
    justify-content: space-around;

    div {
      writing-mode: vertical-lr;
      transform: rotate(180deg);
    }
  }

  svg {
    grid-area: 1 / 2 / 2 / 3;
    width: 100%;
    height: var(--graph-height);
    margin-block: calc(0.5em - 1px);
  }

  path {
    stroke: currentcolor;
    pointer-events: none;
  }

  rect {
    fill: transparent;

    &:hover {
      fill: var(--graph-highlight);
    }
  }

  svg + div {
    position: absolute;
    top: calc(var(--graph-height) / 2 + 0.5em);
    width: max-content;
    max-width: calc(100vw / 2 - 4 * var(--key-padding));
    padding: var(--key-padding);
    background: var(--content-background);
    color: var(--content-text);
    border: 1px solid var(--key-line);
    border-radius: var(--rounding);
    text-align: left;
    transform: translateY(-50%);
    pointer-events: none;

    div {
      margin-bottom: 0.75em;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
    }

    table {
      grid-template-columns: max-content 1fr max-content;
    }

    tr {
      gap: 7px;
    }

    td:nth-child(1)::after {
      margin-top: 0;
    }

    td:nth-child(3) {
      white-space: nowrap;
    }

    td:nth-child(3)::after {
      content: none;
    }
  }
}

.wind-milestones {
  margin: 0.75rem auto 0;

  tr:nth-child(even) {
    background: var(--table-stripe);
    border: solid var(--background);
    border-width: 2px 0;
  }

  th, td {
    padding: 0.125rem 0.5rem;
  }

  th {
    font-weight: 400;
    text-align: left;
  }
}

dialog {
  &::backdrop {
    background: rgba(0,0,0,0.5);
  }

  &[open] {
    display: grid;
    grid-template-columns: 1fr 1.5rem;
    grid-template-rows: 1.5rem min-content; /* required to stop Safari stretching the dialog to the viewport height */
    gap: 1rem;
    width: 24rem;
    max-width: calc(100vw - 6rem);
    padding: 1rem;
    border: 0;
    border-radius: var(--rounding);
    background: var(--content-background);
    color: var(--content-text)
  }

  h2 {
    margin: 0;
    font-size: 1.5rem;
  }

  div {
    grid-area: 2 / 1 / 3 / 3;
    max-height: calc(100vh - 8.5rem);
    max-height: calc(100dvh - 8.5rem);
    overflow: auto;
  }

  p + p {
    margin-top: 1rem;
  }

  button {
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;

    &::-moz-focus-inner {
      padding: 0;
      border: 0;
    }
  }

  svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
  }

  path {
    stroke: var(--content-text);
    stroke-width: 4;
    stroke-linecap: butt;
  }
}