/* Cards. Default outlined per MD3 with a soft level-1 shadow so the
   surface lifts off the lavender page background. Without the shadow,
   `surface` (near-white) and body's `surface-container` (lavender) sit too
   close in luminance and the card edge reads faint. */
.card {
  /* Body sits on `background` (near-white plum); cards stay on the same
     near-white tone and rely on a subtle elevation shadow (rather than an
     outline) to lift off the page. Borderless feels more MD3-modern; the
     shadow does the structural work. */
  background: var(--md-sys-color-surface);
  border: none;
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--md-sys-elevation-level1);
}
.card--elevated {
  border: none;
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-sys-elevation-level1);
}
.card--filled {
  border: none;
  background: var(--md-sys-color-surface-container-high);
}

.card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.card__title {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

.card__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem 1rem;
}

/* Field grid mirrors the form builder's canvas: 5 equal-width tracks
   regardless of inner content, with each .field-cell spanning its
   col_span via the --col-span custom property set inline by the
   _lens_sections.html partial. */
.field-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* Column gap only — the grid itself contains a single row of content;
     spacing between rows of fields is the margin below, since each row of
     the section renders its own .field-grid. */
  column-gap: 1rem;
  margin-bottom: 1rem;
  /* Without start-alignment, a single tall textarea in a row forces every
     other cell to stretch to its height. */
  align-items: start;
}
.field-grid:last-child { margin-bottom: 0; }
.field-cell {
  grid-column: span var(--col-span, 1);
  min-width: 0;
}
.field-cell > md-outlined-text-field,
.field-cell > md-outlined-select {
  width: 100%;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem;
  border-radius: var(--md-sys-shape-corner-small);
}
.field__label {
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-label-medium-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: var(--md-sys-typescale-label-medium-weight);
}
.field__value {
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
}
.field__value--empty { color: var(--md-sys-color-on-surface-variant); }

.cf-cell {
  position: relative;
  cursor: pointer;
  transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.cf-cell:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent);
}