@layer components {
  /* Base
  /* ------------------------------------------------------------------------ */

  .card {
    --card-bg-color: var(--color-canvas);
    --card-border: 1px solid var(--color-ink-lighter);
    --card-padding-block: var(--block-space);
    --card-padding-inline: var(--inline-space);
    --card-radius: 0.5em;

    background-color: var(--card-bg-color);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-inline-size: 16rem;
    overflow: hidden;
    padding: var(--card-padding-block) var(--card-padding-inline);
  }

  /* Header
  /* ------------------------------------------------------------------------ */

  .card__header {
    border-block-end: var(--card-border);
    font-weight: 600;
    margin-block-end: var(--block-space-half);
    padding-block-end: var(--block-space-half);
  }

  .card__header--split {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
  }

  .card__header--accent {
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--card-header-color, transparent) 25%, var(--color-canvas)),
      color-mix(in srgb, var(--card-header-color, transparent) 45%, var(--color-canvas))
    );
    margin-block-start: calc(-1 * var(--card-padding-block));
    margin-inline: calc(-1 * var(--card-padding-inline));
    padding: var(--card-padding-block) var(--card-padding-inline);
    padding-block-end: var(--block-space-half);
    margin-block-end: var(--block-space-half);
  }

  /* Body
  /* ------------------------------------------------------------------------ */

  .card__body {
    flex-grow: 1;
  }

  /* Notes - inline auto-save panel with floating label
  /* ------------------------------------------------------------------------ */

  .card__notes {
    background-color: var(--color-notes-bg);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    padding: 0.4em 0.3em;
    position: relative;
  }

  .card__notes-label {
    color: var(--color-ink-dark);
    font-weight: 600;
    margin-block-end: 0;
    transition: font-size 150ms ease;
  }

  .card__notes:has(.card__notes-input:focus) .card__notes-label,
  .card__notes:has(.card__notes-input:not(:placeholder-shown)) .card__notes-label {
    font-size: var(--text-x-small);
  }

  .card__notes .input--textarea {
    --input-background: var(--color-notes-bg);
    --input-border-size: 0;
    --input-padding: 0;
    --focus-ring-size: 0;
    min-block-size: 3lh;
    resize: vertical;
  }

  /* Footer
  /* ------------------------------------------------------------------------ */

  .card__footer {
    border-block-start: var(--card-border);
    display: flex;
    gap: 0.5rem;
    margin-block-start: var(--block-space-half);
    padding-block-start: var(--block-space-half);
  }

  /* Meta - key/value pairs using definition list with div wrappers
  /* Each dt/dd pair is wrapped in a <div> for flex-wrap layout:
  /*   <dl class="card__meta"><div><dt>…</dt><dd>…</dd></div></dl>
  /* ------------------------------------------------------------------------ */

  .card__meta {
    --meta-spacer-block: 0.5ch;
    --meta-spacer-inline: 1ch;

    display: flex;
    flex-direction: column;
    font-size: var(--text-small);
    gap: var(--meta-spacer-block);
    margin: 0;
  }

  .card__meta + .card__meta,
  .card__meta + .card__meta-details > summary.card__meta,
  .card__meta + .card__meta-group > .card__meta:first-child,
  .card__meta-details + .card__meta,
  .card__meta-details + .card__meta-group > .card__meta:first-child,
  .card__meta-group + .card__meta,
  .card__meta-group + .card__meta-group > .card__meta:first-child,
  .card__meta-group + .card__meta-details > summary.card__meta {
    border-block-start: var(--card-border);
    margin-block-start: var(--meta-spacer-block);
    padding-block-start: var(--meta-spacer-block);
  }

  .card__meta > div:not(.card__meta-row),
  .card__meta > a.card__meta-link {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--meta-spacer-inline);
  }

  .card__meta > :not(:first-child) {
    border-block-start: 1px solid var(--color-ink-lighter);
    padding-block-start: var(--meta-spacer-block);
  }

  .card__meta dt {
    color: var(--color-ink-dark);
    font-weight: 500;
  }

  .card__meta dd {
    font-weight: 700;
    margin: 0;
    margin-inline-start: auto;
    text-align: end;
  }

  /* Meta row - wrapper for a dt/dd pair + an action button
  /* The inner div (dt/dd pair) fills available space, button stays right */
  .card__meta > .card__meta-row {
    align-items: center;
    display: flex;
    gap: var(--meta-spacer-inline);
  }

  .card__meta > .card__meta-row > div,
  .card__meta > .card__meta-row > a.card__meta-link {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0 var(--meta-spacer-inline);
    min-width: 0;
  }

  /* Meta link - clickable dt/dd pair that navigates */
  a.card__meta-link {
    color: inherit;
    text-decoration: none;
  }

  /* Meta details - expandable row below card__meta
  /* ------------------------------------------------------------------------ */

  .card__meta-details {
    margin-block-start: var(--meta-spacer-block, 0.5ch);
  }

  .card__meta-details:first-child {
    margin-block-start: 0;
  }

  .card__meta-details:first-child > summary.card__meta {
    border-block-start: 0;
    padding-block-start: 0;
  }

  .card__meta-details > summary {
    cursor: pointer;
    list-style: none;
  }

  .card__meta-details > summary::-webkit-details-marker {
    display: none;
  }

  .card__meta-details > summary.card__meta {
    border-block-start: 1px solid var(--color-ink-lighter);
    padding-block-start: var(--meta-spacer-block, 0.5ch);
  }

  .card__meta-details > summary dt {
    align-items: center;
    display: flex;
    gap: 0.5ch;
  }

  .card__meta-details > summary dd {
    align-items: center;
    display: flex;
    gap: 0.5ch;
    justify-content: end;
  }

  .card__meta-details > summary dd .icon--chevron-right {
    display: inline-block;
    transition: rotate 150ms ease-out;
  }

  .card__meta-details[open] > summary dd .icon--chevron-right {
    rotate: 90deg;
  }

  .card__meta--header dt {
    font-weight: 600;
  }

  .card__meta--header dd .icon--chevron-right {
    font-size: var(--text-large);
  }

  .card__meta-details[open] > summary.card__meta--header {
    padding-block-end: var(--block-space-half);
  }

  .card__meta-details[open] > .card__meta-expand {
    border-block-start: var(--card-border);
  }

  .card__meta-expand {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding-block: var(--block-space-half);
  }

  .card__meta-expand-form {
    border: var(--card-border);
    border-radius: 0.35em;
    color: var(--color-ink);
    padding-block: var(--block-space-half);
  }

  .card__meta-expand-form-header {
    border-block-end: 1px solid var(--color-ink-lighter);
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    margin-block-end: var(--block-space-half);
    padding-block-end: var(--block-space-half);
  }

  .card__meta-expand-form-header:focus {
    outline: none;
  }

  .card__meta-expand-form:has(.stepper) .card__meta-expand-row:not(:has(.stepper)) {
    padding-inline-end: calc(var(--stepper-btn-size) * 0.875 + var(--stepper-gap));
  }

  .card__meta-expand-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5ch;
    margin-block-end: var(--block-space-half);
  }

  .card__meta-expand-row .label {
    margin-block-end: 0;
  }

  .card__meta-expand-row > :last-child:not(.field) {
    margin-inline-start: auto;
  }

  .card__meta-expand-row .field {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5ch;
    margin-block-end: 0;
    max-inline-size: none;
    width: 100%;
  }

  .card__meta-expand-row .field--location {
    width: auto;
  }

  .card__meta-expand-row .input--select {
    inline-size: auto;
    margin-inline-start: auto;
  }

  .card__meta-expand-row--stack {
    flex-direction: column;
    align-items: stretch;
  }

  .card__meta-expand-row--stack .input--textarea {
    min-block-size: calc(2lh + (2 * 0.8em));
  }

  .card__meta-expand-actions {
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    margin-block-start: var(--block-space);
    padding-block-start: 0;
  }

  .card__meta-expand-history {
    max-block-size: 12lh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Meta expand table - compact inline table
  /* ------------------------------------------------------------------------ */

  .card__meta-expand .table {
    border-radius: 0;
    box-shadow: none;
    font-size: var(--text-small);
  }

  .card__meta-expand-empty {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin: 0;
  }

  /* Card form - inline edit form for card footer
  /* ------------------------------------------------------------------------ */

  .card__form {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .card__form-row {
    align-items: center;
    display: grid;
    gap: var(--meta-spacer-inline, 1ch);
    grid-template-columns: auto 1fr;
    position: relative;
  }

  .card__form-row .field {
    display: contents;
  }

  .card__form-row .label {
    margin-block-end: 0;
  }

  .card__form-row .input {
    justify-self: end;
    text-align: end;
  }

  .card__form-row .input--select {
    max-inline-size: 30ch;
  }

  .card__form-row .stepper {
    justify-self: end;
  }

  /* Stack on mobile - same as card__meta */
  @media (max-width: 639px) {
    .card__form-row {
      grid-template-columns: 1fr;
    }

    .card__form-row .input {
      text-align: start;
    }
  }

  .card__form-actions {
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
  }

  /* Disclosure - collapsible card sections using details/summary
  /* ------------------------------------------------------------------------ */

  .card__disclosure {
    --card-bg-color: var(--color-canvas);
    --card-border: 1px solid var(--color-ink-lighter);
    --card-padding-block: var(--block-space);
    --card-padding-inline: var(--inline-space);
    --card-radius: 0.5em;

    background-color: var(--card-bg-color);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow);
    margin-block-start: var(--block-space);
    overflow: hidden;
  }

  .card__disclosure > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: var(--text-small);
    font-weight: 600;
    gap: 0.5ch;
    justify-content: space-between;
    padding: var(--block-space-half) var(--card-padding-inline);
  }

  .card__disclosure[open] > summary {
    border-block-end: var(--card-border);
  }

  .card__disclosure > summary .icon--chevron-right {
    transition: rotate 150ms ease-out;
  }

  .card__disclosure[open] > summary .icon--chevron-right {
    rotate: 90deg;
  }

  .card__disclosure > .card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-inline-size: 0;
  }

  /* Card form title
  /* ------------------------------------------------------------------------ */

  .card__form-title {
    font-size: var(--text-medium);
    font-weight: 700;
  }

  /* Card form variants - styled forms for domain actions
  /* ------------------------------------------------------------------------ */

  .card__form[class*="card__form--"] {
    border: var(--card-border);
    border-radius: 0.5em;
    box-shadow: var(--shadow);
    margin-block-start: var(--block-space-half);
    padding: var(--block-space);
  }
}