/*
 * Panel component.
 * A container for content sections, cards, dialogs.
 * Uses BEM naming convention.
 */
@layer components {
  .panel {
    --base-space: 1.6rem;
    --panel-max-width: 68em;
    --panel-padding-inline: var(--base-space);
    --panel-margin-inline-negative: calc(var(--panel-padding-inline) * -1);
    --panel-radius: 0.75em;
    --recordable-block-padding: calc(var(--base-space) * 2);
    --recordable-inline-padding: calc(var(--base-space) * 4);

    background: var(--surface-1);
    border-radius: var(--panel-radius);
    color: var(--text-on-surface-1);
    inline-size: 100%;
    max-inline-size: var(--panel-max-width);
    margin-inline: auto;
    padding-inline: var(--panel-padding-inline);
    padding-block-end: calc(var(--base-space) * 2);
  }

  @media screen and (min-width: 768px) {
    .panel {
      --panel-padding-inline: calc(var(--base-space) * 2);
    }
  }

  .panel__header {
    margin-block-end: var(--block-space);
  }

  .panel__title {
    font-size: var(--text-large);
    font-weight: 700;
    margin: 0;
  }

  .panel__description {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin-block-start: var(--block-space-half);
  }

  .panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half) var(--inline-space);
    margin-block-end: var(--block-space);
  }

  .panel__body {
    /* Default body styles */
  }

  .panel__empty {
    color: var(--color-ink-dark);
    font-style: italic;
    padding: var(--block-space);
    text-align: center;
  }

  .panel__footer {
    margin-block-start: var(--block-space);
  }

  /*
   * Wide panel (prose-width, responsive)
   */
  .panel--wide {
    background: var(--surface-1);
    border-radius: var(--panel-radius, 0.75em);
    inline-size: min(95%, var(--size-content-4));
  }

  /*
   * Perma panel - extends to bottom of page, responsive padding
   * Used for community, project pages, etc.
   */
  .panel--perma {
    max-width: 1088px;
    min-block-size: calc(100vh - var(--nav-height, 4rem));
    padding: 0 16px 32px;
    position: relative;
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .panel--perma {
      border-radius: var(--panel-radius) var(--panel-radius) 0 0;
      box-shadow: var(--shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1));
      padding: 0 128px 32px;
    }
  }

  /*
   * Narrow panel
   */
  .panel--narrow {
    max-inline-size: 32rem;
    margin-inline: auto;
  }

  /*
   * Centered panel
   * For authentication pages, dialogs, etc.
   */
  .panel--centered {
    --panel-padding: var(--block-space-double) var(--inline-space-double);

    max-inline-size: 24rem;
    margin-inline: auto;
  }

  /*
   * Panel with shadow
   */
  .panel--elevated {
    box-shadow: var(--shadow);
  }

  /*
   * Panel with border
   */
  .panel--outlined {
    border: var(--border);
  }

  /*
   * Compact panel
   */
  .panel--compact {
    --panel-padding: var(--block-space-half) var(--inline-space-half);
  }

  /*
   * Shaded background
   */
  .panel--shaded {
    --panel-bg: var(--color-ink-lightest);
  }

  /*
   * Session item - for active sessions list
   */
  .session-item {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .session-item--current {
    background: var(--color-ink-lightest);
    border-radius: 0.5rem;
    margin-inline: calc(-1 * var(--inline-space));
    padding-inline: var(--inline-space);
  }

  .session-item__info {
    flex: 1;
    min-inline-size: 0;
  }

  .session-item__device {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
  }

  .session-item__agent {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .session-item__badge {
    background: oklch(var(--lch-green-lighter));
    border-radius: 1em;
    color: oklch(var(--lch-green-darkest));
    font-size: var(--text-x-small);
    font-weight: 600;
    padding: 0.125em 0.5em;
  }

  .session-item__meta {
    color: var(--color-ink-dark);
    display: flex;
    font-size: var(--text-small);
    gap: var(--inline-space);
    margin-block-start: 0.25rem;
  }

  /*
   * Token item - for API tokens list
   */
  .token-item {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .token-item__info {
    flex: 1;
    min-inline-size: 0;
  }

  .token-item__name {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
  }

  .token-item__permission {
    border-radius: 1em;
    font-size: var(--text-x-small);
    font-weight: 600;
    padding: 0.125em 0.5em;
  }

  .token-item__permission--read {
    background: oklch(var(--lch-blue-lighter));
    color: oklch(var(--lch-blue-darkest));
  }

  .token-item__permission--write {
    background: oklch(var(--lch-purple-lighter));
    color: oklch(var(--lch-purple-darkest));
  }

  .token-item__meta {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin-block-start: 0.25rem;
  }

  /*
   * Token reveal - for showing newly created token
   */
  .token-reveal {
    align-items: center;
    background: var(--color-ink-lightest);
    border-radius: 0.5rem;
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    padding: var(--block-space);
  }

  .token-reveal__value {
    flex: 1;
    overflow: hidden;

    code {
      background: none;
      display: block;
      font-family: var(--font-mono);
      font-size: var(--text-small);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .token-reveal__warning {
    align-items: center;
    color: var(--color-ink-dark);
    display: flex;
    font-size: var(--text-small);
    gap: var(--inline-space-half);
    margin-block-start: var(--block-space);
  }

  /*
   * Panel divider and sections
   */
  .panel__divider {
    border: none;
    border-block-start: var(--border);
    margin-block: var(--block-space-double);
  }

  .panel__section {
    margin-block-start: var(--block-space);
  }

  .panel__subtitle {
    font-size: var(--text-normal);
    font-weight: 600;
    margin-block-end: var(--block-space);
  }

  .panel__footer-actions {
    display: flex;
    gap: var(--inline-space);
  }

  /*
   * User item - for users list
   */
  .user-item {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .user-item__avatar {
    flex-shrink: 0;
  }

  .user-item__image,
  .user-item__initials {
    block-size: 2.5rem;
    border-radius: 50%;
    display: block;
    inline-size: 2.5rem;
    object-fit: cover;
  }

  .user-item__initials {
    align-items: center;
    color: var(--color-white);
    display: flex;
    font-size: var(--text-small);
    font-weight: 700;
    justify-content: center;
  }

  .user-item__info {
    flex: 1;
    min-inline-size: 0;
  }

  .user-item__name {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);

    a {
      color: var(--color-ink);
      font-weight: 600;
      text-decoration: none;

      &:hover {
        color: var(--color-link);
        text-decoration: underline;
      }
    }
  }

  .user-item__badge {
    border-radius: 1em;
    font-size: var(--text-x-small);
    font-weight: 600;
    padding: 0.125em 0.5em;
  }

  .user-item__badge--you {
    background: oklch(var(--lch-blue-lighter));
    color: oklch(var(--lch-blue-darkest));
  }

  .user-item__badge--owner {
    background: oklch(var(--lch-purple-lighter));
    color: oklch(var(--lch-purple-darkest));
  }

  .user-item__badge--admin {
    background: oklch(var(--lch-green-lighter));
    color: oklch(var(--lch-green-darkest));
  }

  .user-item__badge--member {
    background: var(--color-ink-lighter);
    color: var(--color-ink-darker);
  }

  .user-item__meta {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin-block-start: 0.125rem;
  }

  /*
   * User profile - for user show page
   */
  .user-profile {
    align-items: center;
    display: flex;
    gap: var(--inline-space);
  }

  .user-profile__avatar {
    flex-shrink: 0;
  }

  .user-profile__image,
  .user-profile__initials {
    block-size: 4rem;
    border-radius: 50%;
    display: block;
    inline-size: 4rem;
    object-fit: cover;
  }

  .user-profile__initials {
    align-items: center;
    color: var(--color-white);
    display: flex;
    font-size: var(--text-large);
    font-weight: 700;
    justify-content: center;
  }

  .user-profile__info {
    flex: 1;
  }

  .user-profile__name {
    font-size: var(--text-large);
    font-weight: 700;
    margin: 0;
  }

  .user-profile__email {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin: 0.25rem 0;
  }

  /*
   * Detail list - for showing key-value pairs
   */
  .detail-list {
    margin: 0;
  }

  .detail-list__item {
    border-block-end: var(--border);
    display: flex;
    justify-content: space-between;
    padding: var(--block-space-half) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .detail-list__label {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
  }

  .detail-list__value {
    font-weight: 500;
  }

  .detail-list__value--with-action {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
  }

  /*
   * Settings links - for navigation in settings
   */
  .settings-links {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .settings-link {
    align-items: center;
    border-block-end: var(--border);
    color: var(--color-ink);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) 0;
    text-decoration: none;
    transition: background-color 100ms var(--ease-out-expo);

    &:last-child {
      border-block-end: none;
    }

    &:hover {
      color: var(--color-link);
    }
  }

  .settings-link__content {
    flex: 1;

    strong {
      display: block;
    }

    span {
      color: var(--color-ink-dark);
      font-size: var(--text-small);
    }
  }

  .settings-link__arrow {
    color: var(--color-ink-light);
  }

  /*
   * Conference item - for conferences list
   */
  .conference-item {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .conference-item__info {
    flex: 1;
    min-inline-size: 0;
  }

  .conference-item__name {
    a {
      color: var(--color-ink);
      font-weight: 600;
      text-decoration: none;

      &:hover {
        color: var(--color-link);
        text-decoration: underline;
      }
    }
  }

  /*
   * Assignment item - for conference assignments list
   */
  .assignment-item {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .assignment-item__info {
    flex: 1;
    min-inline-size: 0;
  }

  .assignment-item__name {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-weight: 600;
    gap: var(--inline-space-half);
  }

  .assignment-item__badge {
    border-radius: 1em;
    font-size: var(--text-x-small);
    font-weight: 600;
    padding: 0.125em 0.5em;
  }

  .assignment-item__badge--attendee {
    background: var(--color-ink-lighter);
    color: var(--color-ink-darker);
  }

  .assignment-item__badge--speaker {
    background: oklch(var(--lch-purple-lighter));
    color: oklch(var(--lch-purple-darkest));
  }

  .assignment-item__badge--volunteer {
    background: oklch(var(--lch-green-lighter));
    color: oklch(var(--lch-green-darkest));
  }

  .assignment-item__badge--staff {
    background: oklch(var(--lch-blue-lighter));
    color: oklch(var(--lch-blue-darkest));
  }

  .assignment-item__meta {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin-block-start: 0.125rem;
  }

  .assignment-item__actions {
    display: flex;
    gap: var(--inline-space-half);
  }

  /*
   * Join code - for invite link display
   */
  .join-code {
    align-items: center;
    background: var(--color-ink-lightest);
    border-radius: 0.5rem;
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    padding: var(--block-space);
  }

  .join-code__url {
    flex: 1;
    overflow: hidden;

    code {
      background: none;
      display: block;
      font-family: var(--font-mono);
      font-size: var(--text-small);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .join-code__stats {
    display: flex;
    gap: var(--inline-space-double);
    margin-block-start: var(--block-space);
    text-align: center;
  }

  .join-code__stat {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .join-code__stat-value {
    font-size: var(--text-large);
    font-weight: 700;
  }

  .join-code__stat-label {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
  }

  /*
   * Event list - for activity log
   */
  .event-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .event-item {
    align-items: flex-start;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .event-item__icon {
    align-items: center;
    background: var(--color-ink-lightest);
    border-radius: 50%;
    color: var(--color-ink-dark);
    display: flex;
    flex-shrink: 0;
    block-size: 2rem;
    inline-size: 2rem;
    justify-content: center;

    .icon {
      block-size: 1rem;
      inline-size: 1rem;
    }
  }

  .event-item__content {
    flex: 1;
    min-inline-size: 0;
  }

  .event-item__action {
    font-weight: 500;
  }

  .event-item__target {
    color: var(--color-ink-dark);
    font-weight: 400;
    margin-inline-start: 0.25em;
  }

  .event-item__meta {
    color: var(--color-ink-dark);
    display: flex;
    font-size: var(--text-small);
    gap: var(--inline-space);
    margin-block-start: 0.25rem;
  }

  .event-item__details {
    margin-block-start: var(--block-space-half);

    summary {
      color: var(--color-link);
      cursor: pointer;
      font-size: var(--text-small);
    }
  }

  .event-item__metadata {
    background: var(--color-ink-lightest);
    border-radius: 0.25rem;
    font-family: var(--font-mono);
    font-size: var(--text-x-small);
    margin-block-start: var(--block-space-half);
    overflow-x: auto;
    padding: var(--block-space-half);
    white-space: pre-wrap;
    word-break: break-word;
  }

  /*
   * Notification list - for notifications page
   */
  .notification-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-block-end: var(--pad);
  }

  .notification-item {
    align-items: flex-start;
    border-block-end: var(--border);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .notification-item--unread {
    background: oklch(var(--lch-blue-lighter) / 0.3);
    border-radius: 0.5rem;
    margin-inline: calc(-1 * var(--inline-space));
    padding-inline: var(--inline-space);
  }

  .notification-item__icon {
    align-items: center;
    background: var(--color-ink-lightest);
    border-radius: 50%;
    color: var(--color-ink-dark);
    display: flex;
    flex-shrink: 0;
    block-size: 2rem;
    inline-size: 2rem;
    justify-content: center;

    .icon {
      block-size: 1rem;
      inline-size: 1rem;
    }
  }

  .notification-item--unread .notification-item__icon {
    background: oklch(var(--lch-blue-light));
    color: oklch(var(--lch-blue-darkest));
  }

  .notification-item__content {
    flex: 1;
    min-inline-size: 0;
  }

  .notification-item__link {
    color: inherit;
    text-decoration: none;

    &:hover {
      color: var(--color-link);
    }
  }

  .notification-item__title {
    font-weight: 500;
  }

  .notification-item__description {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin-block-start: 0.125rem;
  }

  .notification-item__meta {
    color: var(--color-ink-dark);
    display: flex;
    font-size: var(--text-small);
    gap: var(--inline-space);
    margin-block-start: 0.25rem;
  }

  .notification-item__actions {
    flex-shrink: 0;
  }

  /*
   * License item - for license list
   */
  .license-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .license-item {
    align-items: center;
    border-block-end: var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    justify-content: space-between;
    padding: var(--block-space) 0;

    &:last-child {
      border-block-end: none;
    }
  }

  .license-item__info {
    flex: 1;
    min-inline-size: 0;
  }

  .license-item__key {
    code {
      background: var(--color-ink-lightest);
      border-radius: 0.25em;
      font-family: var(--font-mono);
      font-size: var(--text-normal);
      font-weight: 600;
      padding: 0.25em 0.5em;
    }
  }

  .license-item__meta {
    color: var(--color-ink-dark);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-small);
    gap: var(--inline-space-half);
    margin-block-start: var(--block-space-half);
  }

  .license-item__actions {
    display: flex;
    gap: var(--inline-space-half);
  }

  /*
   * Panel header - centered header for detail views
   */
  .panel-header {
    display: block;
    padding-block: 32px 24px;
    position: relative;
    text-align: center;
  }

  .panel-header__title {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
  }

  .panel-header__meta {
    color: var(--color-ink-dark);
    display: block;
    font-size: var(--text-base);
    margin: 8px 0 0;
    text-align: center;
  }

  .panel-header__badges {
    display: flex;
    gap: var(--inline-space-half);
    justify-content: center;
    margin-block-start: 12px;
  }

  .panel-header__title-link {
    color: inherit;
    text-decoration: none;
  }

  .panel-header__title-link:hover .panel-header__title {
    text-decoration: underline;
    text-decoration-color: var(--color-ink-light);
    text-underline-offset: 4px;
  }

  /*
   * Panel right actions (positioned button area)
   */
  .panel__right-actions {
    display: flex;
    gap: 8px;
    position: absolute;
    right: 56px;
    top: 19px;
    z-index: 1;
  }

  @media (max-width: 767px) {
    .panel__right-actions {
      display: none;
    }
  }

  /*
   * Perma toolbar - positioned container for action sheet
   */
  .perma-toolbar {
    position: absolute;
    right: 19px;
    top: 19px;
  }

  @media (max-width: 767px) {
    .perma-toolbar {
      display: none;
    }
  }

  /*
   * Action sheet - expandable dropdown menu
   */
  .action-sheet {
    display: inline;
    position: relative;
  }

  .action-sheet__toggle {
    align-items: center;
    background-color: var(--color-ink-lightest);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 990px;
    color: var(--color-ink);
    cursor: pointer;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    width: 36px;
  }

  .action-sheet__toggle:hover {
    background-color: var(--color-ink-lighter);
    border-color: var(--color-ink-light);
  }

  .action-sheet__toggle .icon {
    height: 20px;
    width: 20px;
  }

  .action-sheet__content {
    background-color: var(--color-accent);
    border-radius: 8px 0 0 8px;
    color: var(--color-white);
    display: none;
    overflow: hidden;
    padding: 52px 4px 4px;
    position: absolute;
    right: -19px;
    top: -13px;
    width: 220px;
    z-index: 10;
  }

  .action-sheet--expanded .action-sheet__content {
    display: block;
  }

  .action-sheet__close {
    background: transparent;
    border: none;
    border-radius: 990px;
    color: var(--color-white);
    cursor: pointer;
    font-size: 18px;
    height: 32px;
    padding: 0;
    position: absolute;
    right: 19px;
    top: 13px;
    width: 32px;
  }

  .action-sheet__close:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .action-sheet__action {
    align-items: center;
    border-radius: 6px;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
  }

  .action-sheet__action:hover {
    background-color: rgba(255, 255, 255, 0.15);
  }

  .action-sheet__action--negative {
    color: oklch(var(--lch-red-lighter));
  }

  .action-sheet__action .icon {
    height: 18px;
    width: 18px;
  }

  .action-sheet__break {
    color: rgba(255, 255, 255, 0.75);
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin: 8px 0 4px;
    padding: 10px 0 0 12px;
  }

  /*
   * Action sheet entry variant - for inline items (comments, replies)
   */
  .action-sheet--entry .action-sheet__content {
    border-radius: 0 18px 18px 18px;
    padding-top: 40px;
    right: 0;
    top: 100%;
    margin-top: 4px;
  }

  .action-sheet--entry .action-sheet__close {
    top: 8px;
    right: 12px;
  }

  .action-sheet--entry .action-sheet__toggle {
    background-color: transparent;
    border: none;
    color: var(--color-ink-dark);
    height: 28px;
    width: 28px;
  }

  .action-sheet--entry .action-sheet__toggle:hover {
    background-color: var(--color-ink-lightest);
    color: var(--color-ink);
  }

  /*
   * Inline edit - for editing titles/content in place
   */
  .inline-edit__title-form {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .inline-edit__title {
    background: transparent;
    border: none;
    font-size: 2rem;
    font-weight: 700;
    outline: none;
    padding: 0;
    text-align: center;
    width: 100%;
  }

  .inline-edit__title:focus {
    outline: none;
  }

  .inline-edit__title-actions {
    background: var(--surface-1);
    border-radius: 0 0 16px 16px;
    display: flex;
    gap: var(--inline-space-half);
    justify-content: center;
    padding: 8px 32px 16px;
  }

  .inline-edit__category-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space-half);
  }

  .inline-edit__category-form .inline-edit__title,
  .inline-edit__category-form .inline-edit__description {
    width: 600px;
    max-width: 100%;
  }

  .inline-edit__description {
    background: transparent;
    border: 1px solid var(--color-ink-lighter);
    border-radius: 4px;
    color: var(--color-ink-dark);
    font-size: var(--text-base);
    line-height: 1.6;
    outline: none;
    padding: 8px 12px;
    resize: vertical;
    text-align: center;
  }

  .inline-edit__description:focus {
    border-color: var(--color-accent);
    outline: none;
  }

  /*
   * Download grid - for app downloads
   */
  .download-grid {
    display: grid;
    gap: var(--block-space);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  }

  .download-card {
    align-items: center;
    background: var(--color-ink-lightest);
    border: 1px solid transparent;
    border-radius: 0.5rem;
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: var(--block-space);
    text-align: center;
    text-decoration: none;
    transition: border-color 150ms var(--ease-out-expo),
                background-color 150ms var(--ease-out-expo);

    &:hover {
      background: var(--color-canvas);
      border-color: var(--color-accent);
    }
  }

  .download-card__icon {
    color: var(--color-ink-dark);
    block-size: 2rem;
    inline-size: 2rem;
  }

  .download-card__platform {
    font-weight: 600;
    font-size: var(--text-small);
  }

  .download-card__note {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
  }
}