:root {
  color-scheme: light;
  --canvas-default: #ffffff;
  --canvas-subtle: #f6f8fa;
  --fg-default: #24292f;
  --fg-muted: #57606a;
  --fg-subtle: #6e7781;
  --border-default: #d0d7de;
  --border-muted: #d8dee4;
  --accent-fg: #0969da;
  --attention-subtle: #fff8c5;
  --attention-muted: rgba(212, 167, 44, 0.4);
  --shadow-resting: 0 1px 0 rgba(27, 31, 36, 0.04);
}

* { box-sizing: border-box; }
html { min-width: 320px; }

body {
  margin: 0;
  background: var(--canvas-default);
  color: var(--fg-default);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

h2 {
  letter-spacing: 0;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.stat {
  background: var(--canvas-default);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  box-shadow: var(--shadow-resting);
  padding: 16px;
  min-width: 0;
}

.stat .label {
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 600;
}

.stat .value {
  margin-top: 6px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat .note {
  margin-top: 6px;
  color: var(--fg-subtle);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Box {
  background: var(--canvas-default);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  box-shadow: var(--shadow-resting);
  margin-top: 16px;
  overflow: hidden;
}

.Box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--canvas-subtle);
  border-bottom: 1px solid var(--border-muted);
}

.Box-header h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.Box-meta {
  min-width: 0;
  color: var(--fg-muted);
  font-size: 12px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Box-body { padding: 16px; }

.activity-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 16px;
  align-items: start;
}

.activity-main {
  min-width: 0;
}

.contrib-scroll {
  overflow-x: auto;
  padding-bottom: 6px;
}

.contrib-grid {
  display: grid;
  grid-template-columns: 30px max-content;
  grid-template-rows: 18px auto;
  column-gap: 6px;
  width: max-content;
  min-width: 100%;
}

.month-labels {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-auto-columns: 12px;
  gap: 3px;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 12px;
}

.month-labels span {
  min-width: 28px;
  white-space: nowrap;
}

.weekday-labels {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(7, 12px);
  gap: 3px;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 12px;
  padding-right: 2px;
}

.weekday-labels span { height: 12px; }
.weekday-labels .mon { grid-row: 2; }
.weekday-labels .wed { grid-row: 4; }
.weekday-labels .fri { grid-row: 6; }

.heatmap {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 12px;
  grid-template-rows: repeat(7, 12px);
  gap: 3px;
  width: max-content;
  min-height: 102px;
}

.day {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #ebedf0;
  outline: 1px solid rgba(27, 31, 36, 0.04);
}

.blank { visibility: hidden; }
.lvl0 { background: #ebedf0; }
.lvl1 { background: #9be9a8; }
.lvl2 { background: #40c463; }
.lvl3 { background: #30a14e; }
.lvl4 { background: #216e39; }

.legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--fg-muted);
  font-size: 12px;
  margin-top: 10px;
}

.legend .day { display: inline-block; }

.year-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.year-button {
  width: 100%;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-default);
  font: inherit;
  text-align: left;
  padding: 0 12px;
  cursor: pointer;
}

.year-button:hover {
  background: var(--canvas-subtle);
}

.year-button[aria-current="true"] {
  background: var(--accent-fg);
  color: #ffffff;
}

.flash {
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--attention-muted);
  border-radius: 6px;
  background: var(--attention-subtle);
  color: #7d4e00;
  font-size: 12px;
}

.flash[hidden] { display: none; }
.table-scroll { overflow-x: auto; }

table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th,
td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-muted);
  text-align: right;
  white-space: nowrap;
}

th:first-child,
td:first-child {
  text-align: left;
}

th {
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 600;
  background: var(--canvas-subtle);
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #f6f8fa; }

td:first-child {
  color: var(--accent-fg);
  font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.empty-row td {
  color: var(--fg-muted);
  font-family: inherit;
  text-align: center;
  padding: 24px 16px;
}

.tooltip {
  position: fixed;
  z-index: 20;
  min-width: 220px;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #24292f;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
}

.tooltip::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  content: "";
  background: #24292f;
  transform: translateX(-50%) rotate(45deg);
}

.tooltip[hidden] { display: none; }

.tooltip-title {
  margin-bottom: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.tooltip-model {
  padding-top: 6px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.tooltip-title + .tooltip-model {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.tooltip-model-name {
  margin-bottom: 3px;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}

.tooltip-row strong {
  color: #ffffff;
  font-weight: 600;
}

.tooltip-empty {
  color: rgba(255, 255, 255, 0.78);
}

.fatal {
  margin: 24px auto;
  max-width: 760px;
}

.footnote {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-muted);
  color: var(--fg-muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .page { padding: 16px 16px 32px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 12px; }
  .stat .value { font-size: 19px; }
  .activity-layout {
    grid-template-columns: 1fr;
  }
  .year-nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .year-button {
    width: auto;
    flex: 0 0 auto;
  }
  .Box-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .Box-meta {
    text-align: left;
    white-space: normal;
  }
  th,
  td {
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
}