breadcrumb-the-shire/web/css/components/app-form-info-tile.css

@layer components {
  /* Form info tile — inline help/context card within form sections. */
  .app-form-info-tiles-title {
    display: block;
    margin-bottom: calc(var(--app-spacing) * 0.55);
    color: var(--app-muted-color);
  }

  .app-form-info-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: calc(var(--app-spacing) * 0.75);
    margin-bottom: calc(var(--app-spacing) * 0.75);
  }

  .app-form-info-tile {
    border: 1px solid var(--badge-neutral-border);
    border-radius: var(--app-border-radius);
    background: var(--badge-neutral-bg);
    padding: calc(var(--app-spacing) * 0.75);
    display: flex;
    flex-direction: column;
    gap: calc(var(--app-spacing) * 0.35);
    margin: 0;
    box-shadow: none;
  }

  .app-form-info-tile-label {
    display: block;
    color: var(--app-muted-color);
    line-height: var(--leading-snug);
  }

  .app-form-info-tile-value {
    display: block;
    color: var(--app-contrast);
    line-height: var(--leading-snug);
  }

  .app-form-info-tile--success {
    border-color: var(--badge-success-border);
    background: var(--badge-success-bg);
  }

  .app-form-info-tile--success .app-form-info-tile-value {
    color: var(--badge-success-color);
  }

  .app-form-info-tile--info {
    border-color: var(--badge-info-border);
    background: var(--badge-info-bg);
  }

  .app-form-info-tile--info .app-form-info-tile-value {
    color: var(--badge-info-color);
  }

  .app-form-info-tile--warning {
    border-color: var(--badge-warn-border);
    background: var(--badge-warn-bg);
  }

  .app-form-info-tile--warning .app-form-info-tile-value {
    color: var(--badge-warn-color);
  }

  @media (max-width: 640px) {
    .app-form-info-tiles {
      grid-template-columns: 1fr;
    }
  }
}