@layer components {
  .admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-inline-l);
    margin-block-end: var(--space-s);
    font-size: var(--text-s);
  }

  .admin-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-inline-xs);
  }

  .admin-period input {
    padding: var(--space-2xs) var(--space-inline-xs);
    border: 1px solid var(--card-border);
    border-radius: 0.5ch;
    background: var(--card-bg);
  }

  .admin-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-end: var(--space-s);
    font-size: var(--text-s);
  }

  .admin-pill {
    padding: var(--space-2xs) var(--space-inline-s);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    color: var(--ink-soft);
  }

  .admin-pill[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

  .admin-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-s);
    font-size: var(--text-s);
  }

  .admin-chips a {
    padding: var(--space-2xs) var(--space-inline-s);
    border-radius: 999px;
    background: var(--blip-soft);
  }

  .admin-tabs {
    display: flex;
    gap: var(--space-inline-l);
    margin-block-end: var(--space-m);
    border-block-end: 1px solid var(--card-border);
  }

  .admin-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-s);
    margin: 0 0 var(--space-l);
  }

  .admin-metrics > div,
  .admin-card {
    padding: var(--space-s) var(--space-inline-m);
    border: 1px solid var(--card-border);
    border-radius: 1ch;
    background: var(--card-bg);
  }

  .admin-metrics dt { font-size: var(--text-xs); color: var(--quiet-text); text-transform: uppercase; letter-spacing: 0.04em; }
  .admin-metrics dd { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }

  .admin-card { margin-block-end: var(--space-l); }
  .admin-card h2 { font-size: var(--text-m); }

  .admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: 0 var(--space-l);
  }

  .admin-breakdown summary {
    cursor: pointer;
    font-size: var(--text-s);
    font-weight: 700;
    padding-block: var(--space-2xs);
  }

  .admin-table { margin-block: var(--space-xs) var(--space-l); }
  .admin-table th a { font-weight: 400; }
  .table-scroll.admin-table td { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

  .admin-table a {
    text-decoration: underline;
    text-decoration-color: var(--quiet);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }

  .table-scroll :is(th, td).admin-number { text-align: end; font-variant-numeric: tabular-nums; }

  .table-scroll th.admin-day {
    padding-block-start: var(--space-m);
    font-style: italic;
    color: var(--ink-soft);
  }

  .admin-truncate {
    display: inline-block;
    max-inline-size: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  .analytics-visitor--user { color: var(--sky-deep); font-weight: 700; }

  .admin-pager {
    display: flex;
    gap: var(--space-inline-l);
    margin-block: var(--space-m);
  }

  .admin-pager [rel="next"] { margin-inline-start: auto; }

  .admin-visitor-users { padding-inline-start: var(--space-inline-m); margin-block: 0 var(--space-m); }

  .admin-legend {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--card-border);
    font-size: var(--text-s);
    color: var(--ink-muted);
  }

  .admin-legend h2 { font-size: var(--text-m); }
  .admin-legend dt { font-weight: 700; color: var(--ink-soft); }
  .admin-legend dd { margin: 0 0 var(--space-xs); }

  .analytics-chart {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-inline-xs);
  }

  .analytics-chart__scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
    block-size: 10rem;
    font-size: var(--text-xs);
    line-height: 1;
    color: var(--quiet-text);
  }

  .analytics-chart__plot {
    display: block;
    inline-size: 100%;
    block-size: 10rem;
    border-block: 1px solid var(--card-border);
    background: linear-gradient(var(--card-border), var(--card-border)) 0 50% / 100% 1px no-repeat;
  }

  .analytics-chart__line { fill: none; stroke-width: 1.5px; stroke-linejoin: round; }
  .analytics-chart__line--pageviews { stroke: var(--ink); }
  .analytics-chart__line--visits { stroke: var(--sky-deep); }
  .analytics-chart__line--visitors { stroke: var(--blip); }

  .analytics-chart__mark { fill: transparent; }
  .analytics-chart__mark:hover { fill: color-mix(in oklch, var(--ink) 6%, transparent); }

  .analytics-chart__ticks,
  .analytics-legend {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--quiet-text);
  }

  .analytics-legend {
    justify-content: start;
    gap: var(--space-inline-l);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .analytics-legend li { display: flex; align-items: center; gap: var(--space-inline-xs); }

  .analytics-legend__swatch { inline-size: 0.9rem; block-size: 0.2rem; border-radius: 0.1rem; }
  .analytics-legend__swatch--pageviews { background: var(--ink); }
  .analytics-legend__swatch--visits { background: var(--sky-deep); }
  .analytics-legend__swatch--visitors { background: var(--blip); }

  .analytics-timeline h2 { font-size: var(--text-m); margin-block-start: var(--space-l); }

  .analytics-timeline ol {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-s);
  }

  .analytics-timeline li {
    display: flex;
    gap: var(--space-inline-m);
    padding-block: var(--space-2xs);
  }

  .analytics-timeline time {
    flex: none;
    font-variant-numeric: tabular-nums;
    color: var(--quiet-text);
  }

  .analytics-timeline strong { font-weight: 700; }
  .analytics-timeline .note { margin-inline-start: var(--space-inline-xs); }

  .analytics-timeline__marker {
    color: var(--quiet-text);
    border-block-start: 1px solid var(--card-border);
  }

  .analytics-timeline__event--server { color: var(--ink-muted); }
}