/* kiweno brand layer on top of Pico CSS.
   Values extracted from kiweno.com/de/ theme (style.min.css v0.11.3):
   - font: Circular Pro, copy 300 / headings 700
   - base: #252525 on #fff; buttons black pill → hover #0f7689, active #126879
   - focus/action cyan #00abcc, success mint #aedad8, error coral #eb5c63, warning #ffc103 */

@font-face {
  font-family: "Circular Pro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/lineto-circular-pro-book.woff2") format("woff2");
}

@font-face {
  font-family: "Circular Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lineto-circular-pro-bold.woff2") format("woff2");
}

:root {
  --kiweno-black: #252525;
  --kiweno-teal: #0f7689;
  --kiweno-teal-dark: #126879;
  --kiweno-cyan: #00abcc;
  --kiweno-mint: #aedad8;
  --kiweno-coral: #eb5c63;
  --kiweno-yellow: #ffc103;
  --kiweno-grey: #f7f7f7;

  /* Pico overrides */
  --pico-font-family: "Circular Pro", -apple-system, blinkmacsystemfont,
    "Segoe UI", roboto, "Helvetica Neue", sans-serif;
  --pico-font-weight: 300;
  --pico-color: var(--kiweno-black);
  --pico-h1-color: var(--kiweno-black);
  --pico-h2-color: var(--kiweno-black);
  --pico-h3-color: var(--kiweno-black);
  --pico-primary: var(--kiweno-teal);
  --pico-primary-hover: var(--kiweno-teal-dark);
  --pico-primary-underline: var(--kiweno-teal);
  --pico-primary-focus: rgba(0, 171, 204, 0.35);
  --pico-border-radius: 10px; /* kiweno input radius */
}

body {
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/* Buttons: kiweno pill style — black, uppercase, teal on hover.
   [type=…] selectors needed to outrank Pico's own attribute selectors. */
button,
[role="button"],
[type="submit"],
[type="button"] {
  border-radius: 2em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.2; /* anchors otherwise inherit 1.5 and grow taller than buttons */
  padding: 0.9em 2em;
  --pico-background-color: var(--kiweno-black);
  --pico-border-color: var(--kiweno-black);
  --pico-color: #fff;
  transition: background 150ms cubic-bezier(0, 0, 0.25, 1),
    border-color 150ms cubic-bezier(0, 0, 0.25, 1);
}

button:hover, button:focus,
[role="button"]:hover, [role="button"]:focus,
[type="submit"]:hover, [type="submit"]:focus,
[type="button"]:hover, [type="button"]:focus {
  --pico-background-color: var(--kiweno-teal);
  --pico-border-color: var(--kiweno-teal);
  --pico-color: #fff;
}

button:active,
[role="button"]:active,
[type="submit"]:active,
[type="button"]:active {
  --pico-background-color: var(--kiweno-teal-dark);
  --pico-border-color: var(--kiweno-teal-dark);
}

/* Secondary buttons: outlined black, teal on hover */
button.secondary, button.outline,
[role="button"].secondary, [role="button"].outline,
[type="submit"].secondary, [type="submit"].outline,
[type="button"].secondary, [type="button"].outline {
  --pico-background-color: transparent;
  --pico-border-color: var(--kiweno-black);
  --pico-color: var(--kiweno-black);
}

button.secondary:hover, button.secondary:focus, button.outline:hover, button.outline:focus,
[role="button"].secondary:hover, [role="button"].secondary:focus,
[role="button"].outline:hover, [role="button"].outline:focus,
[type="submit"].secondary:hover, [type="submit"].secondary:focus,
[type="submit"].outline:hover, [type="submit"].outline:focus,
[type="button"].secondary:hover, [type="button"].secondary:focus,
[type="button"].outline:hover, [type="button"].outline:focus {
  --pico-background-color: transparent;
  --pico-border-color: var(--kiweno-teal);
  --pico-color: var(--kiweno-teal);
}

/* Search/filter groups: fused pill — children inherit the 2em radius on
   the outer edges; Pico squares the inner seams itself */
[role="group"], [role="search"] {
  --pico-border-radius: 2em;
}

/* Link-buttons next to real buttons in a form grid: match the button's
   form margin instead of stretching to the taller grid row */
form .grid > [role="button"] {
  align-self: start;
  margin-bottom: var(--pico-spacing);
}

/* Inputs: light border, cyan focus (kiweno form style) */
input:not([type="submit"]), select, textarea {
  --pico-border-color: #ddd;
}

input:not([type="submit"]):focus, select:focus, textarea:focus {
  --pico-border-color: var(--kiweno-cyan);
  --pico-box-shadow: 0 0 0 1px var(--kiweno-cyan);
}

/* Header: a clean white menubar — logo left, page links right. */
body > header {
  border-bottom: 1px solid #eee;
  margin-bottom: 2rem;
  padding-block: 0.4rem;
}

body > header nav {
  flex-wrap: wrap;
  align-items: center;
}

body > header nav > ul {
  flex-wrap: wrap;
  align-items: center;
}

/* The page-link group beside the logo: a little breathing room between items */
body > header nav ul.nav-links {
  gap: 0.35rem;
}

body > header nav img {
  display: block;
}

/* Logo link: strip Pico's nav-link padding/margin so the logo aligns flush */
body > header nav li a:has(> img) {
  display: block;
  margin: 0;
  padding: 0;
}

/* Menu items — the page links and the logout button (a POST, so a <button>) share one look:
   quiet dark text, a soft pill on hover, teal + bold for the current page. */
body > header nav ul.nav-links a,
body > header nav ul.nav-links button {
  display: inline-block;
  margin: 0;
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--kiweno-black);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

body > header nav ul.nav-links a:hover,
body > header nav ul.nav-links a:focus-visible,
body > header nav ul.nav-links button:hover,
body > header nav ul.nav-links button:focus-visible {
  background: var(--kiweno-grey);
  color: var(--kiweno-teal);
}

body > header nav ul.nav-links a[aria-current="page"] {
  background: var(--kiweno-grey);
  color: var(--kiweno-teal);
  font-weight: 700;
}

/* Dropdown menus (Pico's details.dropdown): the summary looks like a page link, and is marked
   teal + bold while one of its pages is the current one. */
body > header nav ul.nav-links details.dropdown {
  margin: 0;
}

body > header nav ul.nav-links details.dropdown > summary {
  display: inline-flex;
  align-items: center;
  height: auto;
  margin: 0;
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  color: var(--kiweno-black);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  transition: background 150ms ease, color 150ms ease;
}

/* The chevron is inline SVG in the summary (Pico's ::after chevron went undrawn in some browsers):
   it takes the label's colour and flips while the menu is open. */
body > header nav ul.nav-links details.dropdown > summary::after {
  display: none;
}

body > header nav ul.nav-links details.dropdown > summary .nav-chevron {
  display: inline-flex;
  margin-inline-start: 0.35rem;
  transition: transform 150ms ease;
}

body > header nav ul.nav-links details.dropdown > summary .nav-chevron svg {
  width: 1rem;
  height: 1rem;
}

body > header nav ul.nav-links details.dropdown[open] > summary .nav-chevron {
  transform: rotate(180deg);
}

body > header nav ul.nav-links details.dropdown > summary:hover,
body > header nav ul.nav-links details.dropdown > summary:focus-visible,
body > header nav ul.nav-links details.dropdown[open] > summary {
  background: var(--kiweno-grey);
  color: var(--kiweno-teal);
}

body > header nav ul.nav-links details.dropdown > summary.active {
  background: var(--kiweno-grey);
  color: var(--kiweno-teal);
  font-weight: 700;
}

/* The open list: a white card under its label, right-aligned so it stays inside the viewport. */
body > header nav ul.nav-links details.dropdown > ul {
  left: auto;
  right: 0;
  min-width: 13rem;
  padding: 0.35rem;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

body > header nav ul.nav-links details.dropdown > ul li {
  margin: 0;
  padding: 0;
}

body > header nav ul.nav-links details.dropdown > ul li a {
  display: block;
  width: 100%;
  white-space: nowrap;
}

/* Logout is a secondary action — a touch quieter than the page links. */
body > header nav ul.nav-links form {
  margin: 0;
}

body > header nav ul.nav-links form button {
  color: #6b6b6b;
}

@media (max-width: 640px) {
  body > header nav {
    flex-direction: column;
    align-items: flex-start;
  }

  /* The link group now wraps from the left edge: anchor an open list to the group's left edge
     (vertically it stays right under its label), so a menu near the right edge can't overflow. */
  body > header nav ul.nav-links {
    position: relative;
  }

  body > header nav ul.nav-links details.dropdown {
    position: static;
  }

  body > header nav ul.nav-links details.dropdown > ul {
    top: auto;
    left: 0;
    right: auto;
  }
}

/* Safety net only — tables are sized to fit their container */
figure {
  overflow-x: auto;
}

.admin-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--kiweno-black);
  color: #fff;
  border-radius: 2em;
  padding: 0.15rem 0.6rem;
  vertical-align: middle;
}

/* Status badges in kiweno colors */
.status {
  display: inline-block;
  padding: 0.1rem 0.7rem;
  border-radius: 2em;
  font-size: 0.8rem;
  white-space: nowrap;
}

.status-available {
  background: var(--kiweno-mint);
  color: #165a68;
}

.status-pending {
  background: var(--kiweno-grey);
  color: #666;
}

.status-invalid {
  background: var(--kiweno-coral);
  color: #fff;
}

/* Notices: kiweno style — grey panel with colored left border */
.notice {
  background: var(--kiweno-grey);
  border-left: 4px solid var(--kiweno-black);
  border-radius: 0 10px 10px 0;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.notice--success { border-left-color: var(--kiweno-mint); }
.notice--error   { border-left-color: var(--kiweno-coral); }

/* Tables fit their container: long words hyphenate (page is lang="de")
   or break as a last resort instead of forcing horizontal scroll;
   dates/timestamps stay on one line via their data-label */
td, th {
  overflow-wrap: anywhere;
  hyphens: auto;
  padding: 0.6rem 0.75rem;
}

/* Sortable headers (admin user list): read as headers, not as body links */
th .sort-link {
  color: inherit;
  text-decoration: none;
}

th .sort-link:hover,
th .sort-link:focus-visible {
  text-decoration: underline;
}

/* Codes may wrap at their hyphens inside squeezed table columns */
td .code {
  white-space: normal;
}

td[data-label$=" am"],
td[data-label="Befunddatum"],
td[data-label="Zeitpunkt"] {
  white-space: nowrap;
}

td small {
  display: inline-block;
  max-width: 26ch;
}

/* Compact buttons inside tables so they don't inflate column width, and kept on one line — a real
   <button> like "Speichern" otherwise wraps (letter by letter) in a squeezed decision column. */
table [role="button"],
table button {
  font-size: 0.75rem;
  padding: 0.5em 1.2em;
  white-space: nowrap;
}

/* The decision group (select + save): squared to the same corner as the top filter, not a round pill.
   The save button carries the kiweno 2em pill radius, which the group variable can't override, so its
   outer (right) corners are pinned to 12px explicitly to match the select's left corners. */
[role="group"].decision-group {
  --pico-border-radius: 12px;
}

[role="group"].decision-group > .icon-button {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* The decision select sized for its longest option ("Noch nicht entschieden") so the chosen value
   is never truncated; capped at the container so it never overflows a narrow card. Its text matches
   the surrounding table entries (font + size), not the browser's default control font. */
.decision-select {
  min-width: 12rem;
  max-width: 100%;
  font-family: inherit;
  font-size: inherit;
}

/* Icon-only buttons (e.g. the decision save): square, with the label carried in title/aria-label
   and surfaced on hover. */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-button svg {
  width: 1.1em;
  height: 1.1em;
}

table .icon-button {
  padding: 0.5em 0.7em;
}

/* Slightly denser tables than kiweno's 1.125rem copy */
table {
  font-size: 0.95rem;
}

/* Monospace for identification codes */
.code {
  font-family: var(--pico-font-family-monospace, monospace);
  font-size: 0.9em;
  white-space: nowrap;
}

/* Prototype hint in the footer */
footer.prototype-note {
  font-size: 0.8rem;
  color: var(--pico-muted-color, #666);
  margin-top: 2rem;
}

/* The version line under the service address; on admin pages it links to the changelog. */
footer .app-version {
  font-size: 0.8em;
  color: var(--pico-muted-color, #666);
}

/* Below Pico's lg container (which first gives tables real room):
   stack table rows into label/value cards */
@media (max-width: 1023px) {
  /* Each row becomes its own card, so drop the figure's own frame — otherwise it shows as an
     empty bordered card sitting behind the row cards. */
  figure:has(> table) {
    border: none;
    border-radius: 0;
  }

  figure > table,
  figure > table tbody {
    display: block;
    width: 100%;
  }

  figure > table thead {
    display: none;
  }

  figure > table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
  }

  figure > table td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 1rem;
    border: none;
    white-space: normal;
    text-align: right;
    padding: 0.35rem 0;
  }

  figure > table td::before {
    content: attr(data-label);
    font-weight: 700;
    text-align: left;
  }

  figure > table td small {
    max-width: none;
  }

  /* Cells holding buttons, a form or long text: label on top, content below */
  figure > table td[data-label="Aktionen"],
  figure > table td[data-label="Ergebnisse"],
  figure > table td[data-label="Entscheidung"],
  figure > table td[data-label="Log"] {
    display: block;
    text-align: left;
  }

  figure > table td[data-label="Aktionen"]::before,
  figure > table td[data-label="Ergebnisse"]::before,
  figure > table td[data-label="Entscheidung"]::before,
  figure > table td[data-label="Log"]::before {
    display: block;
    margin-bottom: 0.35rem;
  }

  /* Comfortable touch targets: full-width buttons inside cards */
  figure > table td [role="button"] {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.875rem;
    padding: 0.9em 2em;
    margin-bottom: 0.5rem;
  }
}

/* `.flip-early` tables carry an editable control (the invalid-tests decision select) that makes a real
   table too wide below Pico's xl container, so this table becomes cards below 1280px instead of the
   shared 1024px flip. Same recipe as the shared card view above; from 1280px up it is a plain table. */
@media (max-width: 1279px) {
  figure.flip-early {
    border: none;
    border-radius: 0;
  }

  figure.flip-early > table,
  figure.flip-early > table tbody {
    display: block;
    width: 100%;
  }

  figure.flip-early > table thead {
    display: none;
  }

  figure.flip-early > table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
  }

  figure.flip-early > table td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 1rem;
    border: none;
    white-space: normal;
    text-align: right;
    padding: 0.35rem 0;
  }

  figure.flip-early > table td::before {
    content: attr(data-label);
    font-weight: 700;
    text-align: left;
  }

  figure.flip-early > table td small {
    max-width: none;
  }

  figure.flip-early > table td[data-label="Entscheidung"],
  figure.flip-early > table td[data-label="Aktionen"] {
    display: block;
    text-align: left;
  }

  figure.flip-early > table td[data-label="Entscheidung"]::before,
  figure.flip-early > table td[data-label="Aktionen"]::before {
    display: block;
    margin-bottom: 0.35rem;
  }
}

/* The invalid-tests error hint: an info icon in place of the lab's free-text message, which lives in
   its title (hover) and aria-label. Muted so it reads as an affordance, not as a status. */
.error-hint {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--pico-muted-color, #666);
  cursor: help;
  vertical-align: middle;
}

.error-hint svg {
  width: 100%;
  height: 100%;
}

/* Auth screens (login, code entry): a single narrow, centered card.
   Replaces the mockup's inline max-width on the <article> so no styling lives in the markup. */
article.auth-card {
  max-width: 30rem;
  margin: 3rem auto;
}

/* The link-code form: a slightly wider centered card, so its heading fits on one line. */
article.form-card {
  max-width: 34rem;
  margin: 3rem auto;
}

/* Invalid test: the replacement/refund choice as two equal cards, button pinned to the bottom. */
.choice-grid {
  margin: 1.5rem 0;
}

article.choice-card {
  display: flex;
  flex-direction: column;
  margin: 0;
}

article.choice-card h2 {
  font-size: 1.15rem;
}

article.choice-card a[role="button"] {
  margin-top: auto;
  align-self: flex-start;
}

/* The customer's own replacement/refund entry under the admin's decision select. */
small.customer-request {
  display: block;
  margin-top: 0.35rem;
}

/* The shop order under a customer's Ersatz: its own block below the address, a hairline apart. */
.shop-order {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--pico-muted-border-color);
}

.shop-order form {
  margin: 0;
}

/* A POST that reads as a text link (it must not be a GET), so it does not widen a table column the way
   Pico's full-width uppercase pill submit would. [type=submit] outranks the pill and table button rules. */
button.link-button[type="submit"] {
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--kiweno-teal);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.875em;
  font-weight: inherit;
  text-align: left;
  text-decoration: underline;
  white-space: normal;
  cursor: pointer;
}

button.link-button[type="submit"]:hover,
button.link-button[type="submit"]:focus {
  background: none;
  border: none;
  color: var(--kiweno-teal-dark);
}

/* Status filter as a segmented pill control (GET links; active = raised white pill). */
.filter-tabs {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.15rem;
  margin-bottom: 1.5rem;
  padding: 0.25rem;
  background: var(--kiweno-grey);
  border-radius: 12px;
}

.filter-tabs a {
  display: grid;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  color: var(--kiweno-black);
  font-size: 0.9rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}

/* Reserve each tab's bold width so marking one active never reflows the bar, and
   equal 1fr columns above make every tab the width of the widest label. */
.filter-tabs a span {
  grid-area: 1 / 1;
}

.filter-tabs a::after {
  content: attr(data-tab);
  grid-area: 1 / 1;
  font-weight: 700;
  visibility: hidden;
}

.filter-tabs a:hover,
.filter-tabs a:focus-visible {
  color: var(--kiweno-teal);
}

.filter-tabs a[aria-current="page"] {
  background: #fff;
  color: var(--kiweno-teal);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(37, 37, 37, 0.12);
}

/* Test table: a subtle card with a tinted header row and row hover. */
figure:has(> table) {
  border: 1px solid #ececec;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

figure > table {
  margin-bottom: 0;
}

figure > table thead th {
  background: var(--kiweno-grey);
}

figure > table tbody tr:hover {
  background: #fafafa;
}

/* Every data table sizes its columns to content (auto layout). Headers never break mid-word — if a
   table can't fit, its <figure> scrolls, and below the fit width the shared card rules take over —
   so a long header like "Heruntergeladen" can never shatter into H-/E-. */
figure > table th {
  white-space: nowrap;
}

/* Result button: the Ergebnis label next to an external-link icon, kept on one line. */
td[data-label="Ergebnisse"] a[role="button"].doc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  margin: 0 0.4rem 0.35rem 0;
}

td[data-label="Ergebnisse"] a[role="button"].doc-link svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* Empty state: a calm centered card carrying the primary action. */
article.empty-state {
  text-align: center;
  padding: 1.25rem 1.5rem;
}

article.empty-state p {
  margin-bottom: 1.25rem;
  color: var(--pico-muted-color, #666);
}

/* Ereignis-Log: a multi-line run summary as one row per category, the count right-aligned */
.event-log {
  display: grid;
  gap: 0.1rem;
  min-width: min(22rem, 100%);
  font-size: 0.875rem;
  text-align: left;
}

.event-log-row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
}

.event-log-row.muted {
  color: var(--pico-muted-color, #666);
}

.event-log-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.event-log-row > details,
.event-log-row > ul {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0.35rem;
}

.event-log-row > details > summary {
  font-size: 0.8rem;
}

.event-log-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  padding-top: 0.25rem;
}

.event-log ul {
  padding-left: 1.1rem;
}

.event-log li {
  margin-bottom: 0;
  list-style: disc;
}

/* Admin dashboard: quiet sections of cards and tiles. */
.dashboard-section {
  margin-bottom: 2.5rem;
}

.dashboard-section h2 {
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1rem;
}

.task-card,
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.2rem;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
}

.task-card {
  color: var(--kiweno-black);
  text-decoration: none;
  border-left: 4px solid var(--kiweno-coral);
  transition: background 150ms ease;
}

.task-card:hover,
.task-card:focus-visible {
  background: var(--kiweno-grey);
}

.task-card--done {
  border-left-color: var(--kiweno-mint);
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--kiweno-black);
}

.stat-label {
  font-weight: 600;
}

.task-card small,
.stat-tile small {
  color: #6b6b6b;
}

.lab-runs {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
}

.lab-runs li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
  list-style: none;
}

.lab-runs li strong {
  min-width: 4.5rem;
}

/* Monthly chart: a recessive grid, thin bars, a two-entry legend above. */
.chart-legend {
  display: flex;
  gap: 1.2rem;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.legend-item::before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.4rem;
  border-radius: 3px;
  vertical-align: -0.05rem;
}

.legend-available::before {
  background: var(--chart-available);
}

.legend-invalid::before {
  background: var(--chart-invalid);
}

.month-chart svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
}

:root {
  /* Chart series colours, validated as a pair (lightness, chroma, colour-blind separation, contrast). */
  --chart-available: #0a8aa3;
  --chart-invalid: var(--kiweno-coral);
}

.month-chart .grid {
  stroke: #eee;
  stroke-width: 1;
}

.month-chart .axis {
  fill: #6b6b6b;
  font-size: 11px;
}

.month-chart .bar-available {
  fill: var(--chart-available);
}

.month-chart .bar-invalid {
  fill: var(--chart-invalid);
}

.month-chart .hit {
  fill: transparent;
}

.month-chart g:hover .hit {
  fill: var(--kiweno-grey);
}

.chart-table {
  max-width: 720px;
  margin-top: 0.6rem;
  font-size: 0.9rem;
}