@layer recipe {
  .dashboard-page {
    min-height: 100svh;
    background: var(--gr-color-canvas);
  }

  .dashboard-shell {
    min-height: 100svh;
  }

  .dashboard-sidebar {
    display: grid;
    gap: var(--gr-space-4);
    padding: var(--gr-space-4);
    border-bottom: var(--gr-border-width) solid var(--gr-color-border);
    background: var(--gr-color-surface);
  }

  .dashboard-topbar,
  .dashboard-intro {
    display: flex;
    align-items: center;
  }

  .dashboard-topbar,
  .dashboard-intro {
    justify-content: space-between;
  }

  .dashboard-sidebar__head {
    display: grid;
    gap: var(--gr-space-2);
  }

  .dashboard-sidebar__top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: var(--gr-space-4);
  }

  .dashboard-home-logo {
    width: 6.5rem;
    min-height: var(--gr-control-touch);
    display: flex;
    align-items: center;
  }

  .dashboard-home-logo img {
    display: block;
    width: 100%;
    height: auto;
  }

  .dashboard-sidebar__label {
    color: var(--gr-color-text-subtle);
    font-family: var(--gr-font-mono);
    font-size: var(--gr-text-xs);
  }

  .dashboard-workspace-mark,
  .dashboard-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-family: var(--gr-font-mono);
    font-size: var(--gr-text-xs);
  }

  .dashboard-workspace-mark {
    width: var(--gr-control-compact);
    height: var(--gr-control-compact);
    border: var(--gr-border-width) solid var(--gr-color-border);
    border-radius: var(--gr-radius-control);
    background: var(--gr-color-surface-muted);
    color: var(--gr-color-text);
  }

  .dashboard-workspace-switcher,
  .dashboard-profile {
    width: 100%;
    min-height: var(--gr-control-touch);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gr-space-3);
    padding: var(--gr-space-2) var(--gr-space-3);
    border: var(--gr-border-width) solid var(--gr-color-border);
    border-radius: var(--gr-radius-control);
    background: var(--gr-color-surface);
    color: var(--gr-color-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .dashboard-workspace-switcher:hover,
  .dashboard-profile:hover {
    border-color: var(--gr-color-border-strong);
  }

  .dashboard-workspace-switcher:hover {
    background: var(--gr-color-surface-muted);
  }

  .dashboard-workspace-switcher:focus-visible,
  .dashboard-profile:focus-visible {
    outline: var(--gr-focus-width) solid var(--gr-focus-color);
    outline-offset: var(--gr-focus-offset);
  }

  .dashboard-workspace-switcher__copy,
  .dashboard-profile__copy {
    min-width: 0;
    display: grid;
  }

  .dashboard-workspace-switcher__copy {
    gap: var(--gr-space-1);
  }

  .dashboard-profile__copy {
    gap: 0;
  }

  .dashboard-workspace-switcher > .gr-icon {
    color: var(--gr-color-text-subtle);
  }

  .dashboard-workspace-switcher__chevron {
    transition: transform var(--gr-duration-fast) var(--gr-ease-subtle);
  }

  .dashboard-workspace-switcher[aria-expanded="true"] .dashboard-workspace-switcher__chevron {
    transform: rotate(180deg);
  }

  .dashboard-workspace-menu {
    width: min(18rem, calc(100vw - var(--gr-space-8)));
  }

  .dashboard-workspace-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .dashboard-workspace-option__copy {
    min-width: 0;
    display: grid;
    gap: var(--gr-space-1);
  }

  .dashboard-workspace-option__copy strong,
  .dashboard-workspace-option__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-workspace-option__copy small {
    color: var(--gr-color-text-subtle);
    font-size: var(--gr-text-xs);
  }

  .dashboard-workspace-option__check {
    opacity: 0;
  }

  .dashboard-workspace-option[aria-checked="true"] .dashboard-workspace-option__check {
    opacity: 1;
  }

  .dashboard-workspace-switcher strong,
  .dashboard-profile strong {
    overflow: hidden;
    font-size: var(--gr-text-sm);
    line-height: var(--gr-leading-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-workspace-switcher small,
  .dashboard-profile small {
    color: var(--gr-color-text-subtle);
    font-size: var(--gr-text-xs);
  }

  .dashboard-nav {
    display: flex;
    gap: var(--gr-space-1);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .dashboard-nav a {
    min-height: var(--gr-control-touch);
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding-inline: var(--gr-space-3);
    border-bottom: 2px solid transparent;
    color: var(--gr-color-text-muted);
    font-size: var(--gr-text-sm);
    text-decoration: none;
  }

  .dashboard-nav a:hover,
  .dashboard-nav a:focus-visible,
  .dashboard-nav a[aria-current] {
    color: var(--gr-color-text);
    border-bottom-color: currentColor;
  }

  .dashboard-sidebar__foot {
    display: none;
    padding-top: var(--gr-space-3);
    border-top: var(--gr-border-width) solid var(--gr-color-border);
  }

  .dashboard-profile {
    border-color: transparent;
    background: transparent;
  }

  .dashboard-avatar {
    width: var(--gr-control-compact);
    height: var(--gr-control-compact);
    border-radius: 50%;
    background: var(--gr-color-text);
    color: var(--gr-color-canvas);
  }

  .dashboard-topbar {
    min-height: var(--gr-control-touch);
    flex-wrap: wrap;
    gap: var(--gr-space-4);
    padding: var(--gr-space-2) var(--gr-space-4);
    border-bottom: var(--gr-border-width) solid var(--gr-color-border);
  }

  .dashboard-search {
    flex: 1 1 14rem;
    width: min(100%, 22rem);
  }

  .dashboard-context-nav {
    flex: 0 0 auto;
  }

  .dashboard-context-nav a {
    min-height: var(--gr-control-touch);
    display: inline-flex;
    align-items: center;
  }

  .dashboard-main {
    padding: var(--gr-space-6) var(--gr-space-4) var(--gr-space-12);
  }

  .dashboard-overview,
  .dashboard-grid,
  .dashboard-widget {
    display: grid;
  }

  .dashboard-overview {
    gap: var(--gr-space-6);
  }

  .dashboard-intro {
    align-items: end;
    flex-wrap: wrap;
    gap: var(--gr-space-4);
  }

  .dashboard-intro > div {
    display: grid;
    gap: var(--gr-space-2);
  }

  .dashboard-intro h1 {
    font-size: var(--gr-text-2xl);
  }

  .dashboard-intro p:last-child,
  .dashboard-metrics p {
    color: var(--gr-color-text-muted);
  }

  .dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gr-space-3);
    margin: 0;
  }

  .dashboard-stat {
    min-width: 0;
  }

  .dashboard-metrics dt {
    color: var(--gr-color-text-muted);
    font-size: var(--gr-text-sm);
  }

  .dashboard-metrics dd {
    margin: var(--gr-space-2) 0 0;
    font-family: var(--gr-font-mono);
    font-size: var(--gr-text-2xl);
    line-height: var(--gr-leading-tight);
  }

  .dashboard-metrics dd span {
    color: var(--gr-color-text-subtle);
    font-size: var(--gr-text-md);
  }

  .dashboard-metrics p {
    margin-top: var(--gr-space-1);
    font-size: var(--gr-text-xs);
  }

  .dashboard-grid {
    gap: var(--gr-space-4);
    margin-top: var(--gr-space-8);
  }

  .dashboard-widget {
    align-content: start;
    gap: var(--gr-space-4);
    min-width: 0;
    scroll-margin-top: var(--gr-space-6);
  }

  .dashboard-widget__head {
    gap: var(--gr-space-1);
  }

  .dashboard-widget__head .gr-section-head__title {
    font-size: var(--gr-text-xl);
  }

  .dashboard-projects .gr-table {
    min-width: 38rem;
  }

  .dashboard-projects td:nth-child(3) {
    color: var(--gr-color-text-muted);
    font-family: var(--gr-font-mono);
    font-size: var(--gr-text-xs);
  }

  .dashboard-sort-button {
    justify-content: flex-start;
    gap: var(--gr-space-1);
    min-width: 0;
    padding-inline: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }

  .dashboard-sort-icons {
    width: var(--gr-icon-sm);
    height: var(--gr-icon-sm);
    display: grid;
    place-items: center;
  }

  .dashboard-sort-icon {
    grid-area: 1 / 1;
    width: var(--gr-icon-sm);
    height: var(--gr-icon-sm);
    color: var(--gr-color-text-subtle);
  }

  .dashboard-sort-icon--ascending,
  .dashboard-sort-icon--descending,
  .dashboard-projects th[aria-sort="ascending"] .dashboard-sort-icon--none,
  .dashboard-projects th[aria-sort="descending"] .dashboard-sort-icon--none {
    display: none;
  }

  .dashboard-projects th[aria-sort="ascending"] .dashboard-sort-icon--ascending,
  .dashboard-projects th[aria-sort="descending"] .dashboard-sort-icon--descending {
    display: block;
    color: var(--gr-color-text);
  }

  .dashboard-widget .gr-tabs__list {
    max-width: 100%;
    overflow-x: auto;
  }

  .dashboard-widget .gr-tabs__tab::after {
    bottom: calc(var(--gr-border-width) * -1);
    height: 2px;
    background: var(--gr-color-text);
  }

  .dashboard-widget .gr-tabs__tab[aria-selected="true"] {
    font-weight: var(--gr-weight-semibold);
  }

  .dashboard-tab-panel:not([hidden]) {
    display: grid;
    gap: var(--gr-space-4);
  }

  .dashboard-signal-list {
    display: grid;
    gap: 0;
    margin: 0;
  }

  .dashboard-signal-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gr-space-4);
    padding-block: var(--gr-space-3);
    border-bottom: var(--gr-border-width) solid var(--gr-color-border);
  }

  .dashboard-signal-list > div:first-child {
    padding-top: 0;
  }

  .dashboard-signal-list > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .dashboard-signal-list dt {
    color: var(--gr-color-text-muted);
    font-size: var(--gr-text-sm);
  }

  .dashboard-signal-list dd {
    margin: 0;
    font-family: var(--gr-font-mono);
    font-size: var(--gr-text-sm);
  }

  .dashboard-activity {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dashboard-activity li {
    display: grid;
    gap: var(--gr-space-1);
    padding-block: var(--gr-space-3);
    border-bottom: var(--gr-border-width) solid var(--gr-color-border);
  }

  .dashboard-activity li:first-child {
    padding-top: 0;
  }

  .dashboard-activity li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .dashboard-activity time {
    color: var(--gr-color-text-subtle);
    font-family: var(--gr-font-mono);
    font-size: var(--gr-text-xs);
  }

  @media (min-width: 48rem) {
    .dashboard-main {
      padding-inline: var(--gr-space-4);
    }

    .dashboard-metrics {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

  }

  @media (min-width: 64rem) {
    .dashboard-shell {
      display: grid;
      grid-template-columns: 15rem minmax(0, 1fr);
    }

    .dashboard-sidebar {
      position: sticky;
      top: 0;
      height: 100svh;
      grid-template-rows: auto 1fr auto;
      gap: var(--gr-space-6);
      padding: var(--gr-space-6) var(--gr-space-4);
      border-right: var(--gr-border-width) solid var(--gr-color-border);
      border-bottom: 0;
    }

    .dashboard-sidebar__top {
      grid-template-columns: 1fr;
      align-items: stretch;
      gap: var(--gr-space-4);
    }

    .dashboard-nav {
      display: grid;
      align-content: start;
      gap: 0;
      overflow: visible;
    }

    .dashboard-nav a {
      width: 100%;
      min-height: var(--gr-control-compact);
      padding-inline: var(--gr-space-2);
      border-bottom: 0;
      border-left: 2px solid transparent;
    }

    .dashboard-nav a:hover,
    .dashboard-nav a:focus-visible,
    .dashboard-nav a[aria-current] {
      border-bottom-color: transparent;
      border-left-color: currentColor;
    }

    .dashboard-sidebar__foot {
      display: block;
    }

    .dashboard-topbar {
      min-height: var(--gr-control-compact);
      padding-inline: var(--gr-space-4);
    }

    .dashboard-grid {
      grid-template-columns: minmax(0, 1.8fr) minmax(20rem, 1fr);
      align-items: stretch;
    }

    .dashboard-activity-widget {
      grid-column: 1 / -1;
    }

    .dashboard-activity-widget .dashboard-activity {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-activity-widget .dashboard-activity li {
      padding: 0 var(--gr-space-4);
      border-bottom: 0;
      border-left: var(--gr-border-width) solid var(--gr-color-border);
    }

    .dashboard-activity-widget .dashboard-activity li:first-child {
      padding-left: 0;
      border-left: 0;
    }

    .dashboard-activity-widget .dashboard-activity li:last-child {
      padding-right: 0;
    }
  }

  @media (pointer: fine) and (min-width: 45rem) {
    .dashboard-nav a,
    .dashboard-context-nav a {
      min-height: var(--gr-control-compact);
    }
  }
}