:root {
  color: #1e293b;
  background: #f1f5f9;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

/*
 * Author rules such as `display: grid` and `display: inline-flex` outrank the
 * browser's built-in [hidden] rule, so enforce it globally.
 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
}

.page-width {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
}

/* -------------------------------------------------------------------------- */
/* Site header                                                                */
/* -------------------------------------------------------------------------- */

.site-header {
  color: #ffffff;
  background: #0f172a;
}

.site-title {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 0;
  color: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}

.site-logo {
  width: 1.75em;
  height: 1.75em;
}

.site-header .page-width {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.site-nav {
  display: flex;
  gap: 1.25rem;
}

.site-nav a {
  padding: 0.25rem 0;

  border-bottom: 2px solid transparent;

  color: #cbd5e1;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover {
  color: #ffffff;
}

.site-nav a[aria-current="page"] {
  color: #ffffff;
  border-bottom-color: #93c5fd;
}

.site-nav {
  align-items: center;
}

.site-footer {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;

  color: #94a3b8;
  font-size: 0.75rem;
  text-align: center;
}

/* Sign out is a form so it can POST, styled to sit with the nav links */
.site-nav__logout {
  margin: 0;
}

.site-nav__logout button {
  padding: 0.25rem 0;

  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;

  color: #cbd5e1;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.site-nav__logout button:hover {
  color: #ffffff;
}

/* -------------------------------------------------------------------------- */
/* Login page                                                                 */
/* -------------------------------------------------------------------------- */

.login-card {
  display: grid;
  gap: 1rem;
  width: min(22rem, 100%);
  margin: 3rem auto;
  padding: 1.5rem;

  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #ffffff;
}

.login-card h1 {
  margin: 0;
}

.login-form {
  display: grid;
  gap: 1rem;
}

.login-form label {
  display: grid;
  gap: 0.35rem;

  color: #334155;
  font-size: 0.9rem;
  font-weight: 700;
}

.login-form input {
  min-height: 2.25rem;
  padding: 0.5rem;

  border: 1px solid #94a3b8;
  border-radius: 0.3rem;

  font: inherit;
}

.login-form__error {
  margin: 0;
  padding: 0.5rem 0.75rem;

  border-radius: 0.3rem;

  color: #991b1b;
  background: #fee2e2;

  font-size: 0.9rem;
}

/* -------------------------------------------------------------------------- */
/* Shared buttons                                                             */
/* -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 2.25rem;
  padding: 0.4rem 0.55rem;

  border: 1px solid #94a3b8;
  border-radius: 0.3rem;

  font: inherit;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.button--primary {
  color: #ffffff;
  border-color: #1d4ed8;
  background: #1d4ed8;
}

.button--primary:hover {
  background: #1e40af;
}

.button--secondary {
  color: #1e3a8a;
  border-color: #93c5fd;
  background: #dbeafe;
}

.button--secondary:hover {
  background: #bfdbfe;
}

.button--danger {
  color: #ffffff;
  border-color: #b91c1c;
  background: #b91c1c;
}

.button--danger:hover {
  background: #991b1b;
}

/* -------------------------------------------------------------------------- */
/* Page heading and period selector                                           */
/* -------------------------------------------------------------------------- */

.page-heading {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: end;
  padding: 2rem 0 1rem;
}

.page-heading h1 {
  margin: 0;
}

.muted {
  color: #64748b;
}

.period-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}

.period-picker label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.period-picker input,
.period-picker select,
.period-picker button {
  min-height: 2.25rem;
  padding: 0.4rem 0.55rem;

  border: 1px solid #94a3b8;
  border-radius: 0.3rem;

  font: inherit;
}

/*
 * Selects size to their widest option, so pin the width to keep it steady as the options change
 * with the leave year. Labels are at most 32 characters, e.g. "PP 10: 09 May 2010 - 22 May 2010",
 * plus room for the padding, border, & dropdown arrow.
 */
.period-picker select {
  width: calc(32ch + 2rem);
  max-width: 100%;

  font-variant-numeric: tabular-nums;
}

.period-picker button {
  color: #ffffff;
  border-color: #1d4ed8;
  background: #1d4ed8;
  cursor: pointer;
}

.period-picker button:hover {
  background: #1e40af;
}

/* -------------------------------------------------------------------------- */
/* Balance cards                                                              */
/* -------------------------------------------------------------------------- */

.balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
}

.balance-card {
  display: grid;
  gap: 0.3rem;
  padding: 1rem;

  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #ffffff;
}

.balance-card--highlight {
  border-color: #d97706;
  background: #fffbeb;
}

.balance-label {
  color: #475569;
  font-size: 0.85rem;
  font-weight: 600;
}

.balance-value {
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------- */
/* Pay stub reconciliation                                                    */
/* -------------------------------------------------------------------------- */

/* Sits at the bottom of each pay period card, below the corrections footer */
.pay-stub-panel {
  border-top: 1px solid #cbd5e1;
  background: #ffffff;
}

.pay-stub-panel__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 0.9rem;

  font-size: 0.85rem;
  cursor: pointer;
}

.pay-stub-panel__title {
  font-weight: 700;
}

.pay-stub-status {
  padding: 0.15rem 0.5rem;

  border-radius: 999px;

  font-size: 0.8rem;
  font-weight: 600;
}

.pay-stub-status--not-entered {
  color: #334155;
  background: #e2e8f0;
}

.pay-stub-status--match {
  color: #166534;
  background: #dcfce7;
}

.pay-stub-status--mismatch {
  color: #92400e;
  background: #fef3c7;
}

.pay-stub-panel__body {
  display: grid;
  gap: 0.75rem;
  padding: 0 0.9rem 0.9rem;
}

.pay-stub-panel__note {
  margin: 0;

  color: #334155;
  font-size: 0.9rem;
}

.pay-stub-panel__actions {
  display: flex;
  justify-content: end;
}

.pay-stub-table__scroll {
  overflow-x: auto;
}

.pay-stub-table {
  width: 100%;

  border-collapse: collapse;

  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.pay-stub-table th,
.pay-stub-table td {
  padding: 0.35rem 0.6rem;

  border-bottom: 1px solid #e2e8f0;

  text-align: right;
  white-space: nowrap;
}

.pay-stub-table th[scope="row"],
.pay-stub-table thead tr:first-child th:first-child {
  text-align: left;
}

.pay-stub-table thead th {
  color: #475569;
  font-size: 0.8rem;
}

.pay-stub-table__cell--mismatch {
  color: #92400e;
  background: #fef3c7;
  font-weight: 700;
}

.pay-stub-table__diff {
  font-size: 0.8rem;
  font-weight: 400;
}

/* -------------------------------------------------------------------------- */
/* Calendar heading and navigation                                            */
/* -------------------------------------------------------------------------- */

.calendar-section {
  margin-top: 2rem;
}

.calendar-section__header {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.calendar-section__header h2 {
  margin: 0;
}

.calendar-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* -------------------------------------------------------------------------- */
/* Pay-period cards                                                           */
/* -------------------------------------------------------------------------- */

.pay-periods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.pay-period {
  overflow: hidden;

  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #ffffff;
}

.pay-period--selected {
  border: 2px solid #1d4ed8;
  box-shadow: 0 0 0 2px #dbeafe;
}

.pay-period__header {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem;

  border-bottom: 1px solid #cbd5e1;
  background: #f8fafc;
}

/* Pay period range followed by its leave year, on a single line where space allows */
.pay-period__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  align-items: baseline;
}

.pay-period__timesheet {
  min-height: 0;
  padding: 0.2rem 0.5rem;

  font-size: 0.78rem;
}

.pay-period--selected .pay-period__header {
  background: #eff6ff;
}

.pay-period__range {
  margin: 0;
  color: #334155;
  font-size: 0.9rem;
  font-weight: 700;
}

.pay-period__eyebrow {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.pay-period__calendar {
  overflow-x: auto;
}

.pay-period__weekdays,
.pay-period__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 38rem;
}

.pay-period__weekdays {
  border-bottom: 1px solid #cbd5e1;
  background: #e2e8f0;
}

.pay-period__weekdays span {
  padding: 0.35rem 0.15rem;
  color: #334155;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* Day cells                                                                  */
/* -------------------------------------------------------------------------- */

.day-cell {
  --day-background: #ffffff;
  --day-overlay: rgba(0, 0, 0, 0);
  --holiday-overlay: rgba(0, 0, 0, 0);

  position: relative;

  display: flex;
  flex-direction: column;
  gap: 0.3rem;

  min-height: 8.5rem;
  padding: 0.35rem;

  border-right: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;

  background:
    linear-gradient(var(--day-overlay), var(--day-overlay)),
    linear-gradient(var(--holiday-overlay), var(--holiday-overlay)), var(--day-background);
}

.day-cell:last-child {
  border-right: 0;
}

.day-cell--month-0 {
  --day-background: #ffffff;
}

.day-cell--month-1 {
  --day-background: #eaf8f3;
}

.day-cell--weekend {
  --day-background: #b2b6bd;
}

.day-cell--holiday {
  --holiday-overlay: rgba(217, 119, 6, 0.16);
}

.day-cell--tdy {
  --day-overlay: rgba(109, 40, 217, 0.16);
}

.day-cell--ltdy {
  --day-overlay: rgba(8, 145, 178, 0.16);
}

.day-cell--today {
  box-shadow: inset 0 0 0 2px #1d4ed8;
}

/*
 * The full-cell click target sits behind visible content.
 * Noninteractive content permits clicks to pass through to this surface.
 */
.day-cell__surface {
  position: absolute;
  z-index: 0;
  inset: 0;

  border: 0;
  background: transparent;
  cursor: pointer;
}

.day-cell__surface:hover {
  background: rgba(29, 78, 216, 0.08);
}

.day-cell__surface:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: -3px;
}

.day-cell__header,
.holiday-label {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.metadata-list,
.time-entry-list {
  position: relative;
  z-index: 2;

  /*
   * The lists themselves are click-through, so clicking empty space between
   * entries reaches the day-level surface behind them. The individual
   * editable buttons (.metadata-entry, .time-entry--interactive) re-enable
   * pointer events to open their edit dialogs.
   */
  pointer-events: none;
}

.day-cell__header {
  display: flex;
  justify-content: end;
}

.day-cell__header time {
  display: flex;
  gap: 0.2rem;
  align-items: baseline;
}

.day-cell__number {
  color: #0f172a;
  font-size: 0.85rem;
  font-weight: 700;
}

.day-cell__month {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 600;
}

.holiday-label {
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
}

/* -------------------------------------------------------------------------- */
/* Metadata badges                                                            */
/* -------------------------------------------------------------------------- */

.metadata-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.badge {
  display: inline-block;
  padding: 0.12rem 0.25rem;

  border-radius: 0.2rem;

  color: #ffffff;
  background: #475569;

  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

.badge--wah {
  background: #0369a1;
}

.badge--tdy {
  background: #6d28d9;
}

.badge--ltdy {
  background: #0891b2;
}

.badge--fur {
  background: #b91c1c;
}

.metadata-entry {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.metadata-entry:hover {
  filter: brightness(0.9);
}

.metadata-entry:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Leave and premium entries                                                  */
/* -------------------------------------------------------------------------- */

.time-entry-list {
  display: grid;
  gap: 0.15rem;
  margin-top: auto;
}

.time-entry {
  display: flex;
  gap: 0.25rem;
  justify-content: space-between;
  padding: 0.12rem 0.2rem;

  border-radius: 0.15rem;

  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

/*
 * Only inherit the font family; a `font: inherit` shorthand here would reset
 * the size and numeric variant declared on .time-entry above.
 */
.time-entry--interactive {
  width: 100%;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}

.time-entry--interactive:hover {
  filter: brightness(0.94);
}

.time-entry--interactive:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}

.time-entry--leave {
  color: #991b1b;
  background: #fee2e2;
}

.time-entry--premium {
  color: #166534;
  background: #dcfce7;
}

.time-entry__code {
  font-weight: 700;
}

.time-entry__duration {
  white-space: nowrap;
}

/* -------------------------------------------------------------------------- */
/* Corrections                                                                */
/* -------------------------------------------------------------------------- */

.pay-period__corrections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 0.65rem 0.9rem;

  border-top: 1px solid #cbd5e1;

  color: #7c2d12;
  background: #fff7ed;

  font-size: 0.78rem;
}

.correction-entry {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.15rem 0.35rem;

  border: 0;
  border-radius: 0.2rem;

  color: #7c2d12;
  background: #fed7aa;

  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.correction-entry--positive {
  color: #166534;
  background: #dcfce7;
}

.correction-entry--negative {
  color: #991b1b;
  background: #fee2e2;
}

.correction-entry:hover {
  filter: brightness(0.94);
}

.correction-entry:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}

.correction-add {
  min-height: 0;
  margin-left: auto;
  padding: 0.2rem 0.5rem;

  font-size: 0.78rem;
}

/* Comp & travel comp expiring at the end of the pay period, shown above its corrections */
.pay-period__expirations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 0.65rem 0.9rem;

  border-top: 1px solid #cbd5e1;

  color: #334155;
  background: #f8fafc;

  font-size: 0.78rem;
}

.expiry-entry {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.15rem 0.35rem;

  border-radius: 0.2rem;

  font-variant-numeric: tabular-nums;
}

.modal-form__hint {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 400;
}

/* -------------------------------------------------------------------------- */
/* Modal dialogs (day-entry chooser, metadata, time entry)                    */
/* -------------------------------------------------------------------------- */

.modal-dialog {
  width: min(28rem, calc(100% - 2rem));
  padding: 0;

  border: 1px solid #94a3b8;
  border-radius: 0.6rem;

  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.3);
}

.modal-dialog--wide {
  width: min(36rem, calc(100% - 2rem));
}

.pay-stub-form-grid {
  width: 100%;

  border-collapse: collapse;

  font-size: 0.9rem;
}

.pay-stub-form-grid th,
.pay-stub-form-grid td {
  padding: 0.2rem;

  text-align: left;
}

.pay-stub-form-grid thead th {
  color: #475569;
  font-size: 0.8rem;
}

.timesheet {
  display: grid;
  gap: 0.5rem;
}

.timesheet__heading {
  margin: 0.25rem 0 0;

  color: #475569;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.timesheet__list {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;

  list-style: none;
}

.timesheet__empty {
  margin: 0;
  font-size: 0.9rem;
}

/* Overrides the stacked field layout of `.modal-form label` */
.modal-form .timesheet__request {
  display: grid;
  grid-template-columns: auto 3rem 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.35rem 0.5rem;

  border: 1px solid #e2e8f0;
  border-radius: 0.3rem;

  font-size: 0.9rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.modal-form .timesheet__request input {
  width: auto;
  min-height: 0;
}

/* Entered requests fade out so the remaining ones stand out */
.modal-form .timesheet__request:has(input:checked) {
  color: #94a3b8;
  background: #f8fafc;
  text-decoration: line-through;
}

.timesheet__code {
  font-weight: 700;
}

.timesheet__hours {
  text-align: right;
}

.modal-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.modal-form {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

.modal-form__header {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: start;
}

.modal-form__header h2 {
  margin: 0;
}

.modal-form__header p {
  margin: 0.25rem 0 0;
}

.modal-form__close {
  width: 2rem;
  height: 2rem;

  border: 0;
  border-radius: 0.25rem;

  color: #475569;
  background: transparent;

  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.modal-form__close:hover {
  color: #0f172a;
  background: #e2e8f0;
}

.modal-form label {
  display: grid;
  gap: 0.35rem;

  color: #334155;
  font-size: 0.9rem;
  font-weight: 700;
}

.modal-form input:not([type="hidden"]),
.modal-form select,
.modal-form textarea {
  width: 100%;
  min-height: 2.25rem;
  padding: 0.5rem;

  border: 1px solid #94a3b8;
  border-radius: 0.3rem;
  background: #ffffff;

  font: inherit;
}

.modal-form textarea {
  resize: vertical;
}

.modal-form input:disabled,
.modal-form select:disabled {
  color: #64748b;
  background: #f1f5f9;
  cursor: not-allowed;
}

.modal-form__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: end;
}

/* Push the delete action to the far left of the footer in both edit dialogs */
.modal-form__actions .button--danger {
  margin-right: auto;
}

/* -------------------------------------------------------------------------- */
/* Statistics page                                                            */
/* -------------------------------------------------------------------------- */

/*
 * Charts, drawn by stats-charts.js. Series colors are categorical slots 1-4, validated against the
 * white card surface. WAH & FUR fall below 3:1 contrast, so the table below the charts carries every
 * value as text.
 */
.stats-charts {
  --series-tdy: #2a78d6;
  --series-ltdy: #eb6834;
  --series-wah: #1baf7a;
  --series-fur: #eda100;
  --chart-grid: #e1e0d9;
  --chart-baseline: #c3c2b7;
  --chart-muted: #898781;
  --chart-highlight: rgba(11, 11, 11, 0.04);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

/*
 * The drawn SVG has a fixed pixel width, which grid items otherwise won't shrink below, so the chart
 * could only ever grow. Allowing them to shrink lets stats-charts.js see the narrower width & redraw.
 */
.stats-chart {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 1rem;

  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #ffffff;
}

.stats-chart figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  align-items: baseline;
}

.stats-chart__title {
  margin: 0;
  font-size: 1rem;
}

.stats-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0;
  padding: 0;

  color: #52514e;
  font-size: 0.8rem;
  list-style: none;
}

.stats-chart__legend li {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

/* Legend swatches mirror the column marks */
.stats-chart__swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
}

.stats-chart__plot {
  position: relative;
  min-width: 0;
  min-height: calc(200px + 8px + 28px);
  overflow: hidden;
}

.stats-chart__plot svg {
  display: block;
}

.stats-chart__grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.stats-chart__baseline {
  stroke: var(--chart-baseline);
  stroke-width: 1;
}

.stats-chart__tick {
  fill: var(--chart-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.stats-chart__highlight {
  fill: transparent;
}

.stats-chart__highlight.is-active {
  fill: var(--chart-highlight);
}

.stats-chart__swatch--tdy,
.stats-chart__key--tdy {
  background: var(--series-tdy);
}

.stats-chart__swatch--ltdy,
.stats-chart__key--ltdy {
  background: var(--series-ltdy);
}

.stats-chart__swatch--wah,
.stats-chart__key--wah {
  background: var(--series-wah);
}

.stats-chart__swatch--fur,
.stats-chart__key--fur {
  background: var(--series-fur);
}

.stats-chart__mark--tdy {
  fill: var(--series-tdy);
}

.stats-chart__mark--ltdy {
  fill: var(--series-ltdy);
}

.stats-chart__mark--wah {
  fill: var(--series-wah);
}

.stats-chart__mark--fur {
  fill: var(--series-fur);
}

/* Transparent, keyboard focusable hit targets laid over each year's band */
.stats-chart__targets {
  position: absolute;
  display: flex;
}

.stats-chart__target {
  height: 100%;
  padding: 0;

  border: 0;
  background: transparent;

  cursor: default;
}

.stats-chart__target:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: -2px;
}

.stats-chart__tooltip {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: 0.25rem;
  min-width: 11rem;
  padding: 0.5rem 0.65rem;

  border: 1px solid rgba(11, 11, 11, 0.1);
  border-radius: 0.35rem;
  background: #ffffff;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.15);

  color: #52514e;
  font-size: 0.8rem;
  pointer-events: none;
}

.stats-chart__tooltip[hidden] {
  display: none;
}

.stats-chart__tooltip-heading {
  margin: 0;
  color: #0b0b0b;
  font-weight: 700;
}

.stats-chart__tooltip-row {
  display: grid;
  grid-template-columns: 0.75rem auto 1fr;
  gap: 0 0.4rem;
  align-items: center;
}

.stats-chart__tooltip-row strong {
  color: #0b0b0b;
  font-variant-numeric: tabular-nums;
}

.stats-chart__tooltip-detail {
  grid-column: 2 / -1;
  color: var(--chart-muted);
  font-size: 0.72rem;
}

/* Tooltip rows key their series with a short stroke rather than a box */
.stats-chart__key {
  width: 0.75rem;
  height: 2px;
}

.stats-card {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;

  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #ffffff;
}

/* Grid items won't shrink below their content by default, so allow it for the table to scroll */
.stats-table__scroll {
  min-width: 0;
  overflow-x: auto;
}

.stats-table {
  width: 100%;

  border-collapse: collapse;

  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.stats-table th,
.stats-table td {
  padding: 0.4rem 0.65rem;

  border-bottom: 1px solid #e2e8f0;

  text-align: right;
  white-space: nowrap;
}

.stats-table th[scope="row"],
.stats-table thead tr:first-child th:first-child {
  text-align: left;
}

.stats-table thead th {
  color: #475569;
  font-size: 0.8rem;
}

.stats-table thead th[scope="colgroup"] {
  text-align: center;
}

.stats-table__pct {
  color: #64748b;
  font-size: 0.8rem;
}

.stats-table__totals th,
.stats-table__totals td {
  border-top: 2px solid #94a3b8;
  border-bottom: 0;
  font-weight: 700;
}

.stats-card__note {
  margin: 0;
  font-size: 0.8rem;
}

/* -------------------------------------------------------------------------- */
/* Admin page                                                                 */
/* -------------------------------------------------------------------------- */

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
}

.admin-card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1rem;

  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #ffffff;
}

.admin-card h2,
.admin-card p {
  margin: 0;
}

.admin-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}

.admin-form label {
  display: grid;
  gap: 0.25rem;

  font-size: 0.85rem;
  font-weight: 600;
}

.admin-form input {
  width: 7rem;
  min-height: 2.25rem;
  padding: 0.4rem 0.55rem;

  border: 1px solid #94a3b8;
  border-radius: 0.3rem;

  font: inherit;
}

.admin-result {
  padding: 0.6rem 0.75rem;

  border-radius: 0.3rem;

  color: #166534;
  background: #dcfce7;

  font-size: 0.9rem;
}

.admin-result--noop {
  color: #334155;
  background: #e2e8f0;
}

/* -------------------------------------------------------------------------- */
/* Responsive behavior                                                        */
/* -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .page-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .calendar-section__header {
    align-items: start;
    flex-direction: column;
  }

  .period-picker {
    align-items: stretch;
  }

  .period-picker label {
    flex: 1 1 10rem;
  }

  .period-picker select {
    width: 100%;
  }
}