/*
 * Training — the eating-context training profile: a free-text summary plus an
 * optional list of detailed blocks, each saved on its own. Reuses .field,
 * .chips/.chip-toggle, .field-grid, .tag and .btn; only the block card (saved vs
 * draft), its actions and the compact day strip are new here. See docs/views.md.
 */

/* The free-text summary auto-saves as you type; its hint and a brief "Guardado ✓"
   confirmation share a row under the field. */
.autosave {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.autosave .field__hint {
  margin: 0;
}

.autosave__status {
  flex: none;
  font-size: var(--text-small);
  font-weight: var(--weight-label);
  color: var(--color-accent);
}

.training-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.training-blocks__title {
  font-size: var(--text-title);
  font-weight: var(--weight-heading);
  letter-spacing: -0.01em;
}

.training-blocks__sub {
  margin-top: 2px;
  font-size: var(--text-small);
  color: var(--color-muted);
}

/* The list of saved blocks; each is a card living in its own turbo-frame. */
.block-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The base card is the editable one — a draft or a saved block being edited. It
   stays white so "still a form, not stored yet" is the thing you can see. */
.block-card {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

/* A block that is in the database: tinted and bordered in the brand accent so it
   reads as stored at a glance, next to any white card being edited. */
.block-card--saved {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
}

/* The draft slot collapses when no block is being added, so it costs no gap. */
#new_training_block:empty {
  display: none;
}

/* The schedule/frequency grid closes the form, so drop its trailing margins. */
.block-card .field-grid,
.block-card .field-grid .field {
  margin-bottom: 0;
}

/* Read view of a saved block */
.block-card__name {
  font-size: var(--text-title);
  font-weight: var(--weight-heading);
  letter-spacing: -0.01em;
}

.block-card__desc {
  font-size: var(--text-body);
  color: var(--color-ink);
}

.block-card__days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
}

/* White pills lift off the saved card's tint (the default .tag ground would
   nearly match it). */
.block-card__days .tag {
  background: var(--color-surface);
}

.block-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.block-card__meta dt {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.block-card__meta dd {
  font-size: var(--text-body);
  font-weight: var(--weight-label);
}

/* Actions row — closes both the read card (Editar · delete) and the form
   (Descartar · Guardar bloque): the secondary action left, the primary right. */
.block-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.block-card__actions .btn svg {
  flex: none;
  width: 18px;
  height: 18px;
}

/* Deleting a saved block is destructive and irreversible — it wears the danger
   colour outright, matching the trash in the top bar of the other detail screens. */
.block-card__delete {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-danger);
  cursor: pointer;
}

.block-card__delete:hover {
  background: var(--color-danger-tint);
}

.block-card__delete svg {
  width: 18px;
  height: 18px;
}

/* Compact day strip — the 7 weekday chips as an even, tappable row. */
.chips--days .chip-toggle__pill {
  min-width: 2.5em;
  padding-inline: var(--space-2);
  text-align: center;
}

/* The "Add block" button's leading "+" icon (the only .btn here with an inline
   icon); constrain it like the rest of the app sizes its svgs. */
.training-blocks > .btn svg {
  flex: none;
  width: 20px;
  height: 20px;
}

/* A ghost button all but vanishes into the page's green ground, and on an empty
   screen this is the one thing to press: lift it onto the surface white and
   outline it in the accent so it reads as an invitation, not a placeholder. */
.training-blocks > .btn--ghost {
  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
  box-shadow: var(--shadow-raised);
}

.training-blocks > .btn--ghost:hover {
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
}