/*
 * Track B's stylesheet: the event form, households, tiers, the dashboard.
 * Phone first: base rules style a 390px screen, min-width queries widen it.
 * Rules: docs/conventions/css.md#rules
 */

/* ev-host-action: a 44px button in a host page's header or list row. */

.ev-host-action {
  --bs-btn-padding-y: 0.5625rem;
  flex-shrink: 0;
}

/* ev-host-back: the link back to the events list, above a page title. */

.ev-host-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--ev-tap-min);

  &::before {
    content: "‹";
    margin-right: 0.375rem;
    font-size: 1.25rem;
    line-height: 1;
  }
}

/* ev-event-list: the host's events. */

.ev-event-list {
  display: grid;
  gap: 0.75rem;
}

.ev-event-list__thumb {
  flex-shrink: 0;
  width: 3rem;
  height: 4.5rem;
  object-fit: cover;
}

.ev-event-list__text {
  min-width: 0;
}

/* ev-host-form: every host form (event, tier, household, paste). One column on a phone. */

.ev-host-form__section {
  margin-bottom: 2rem;
}

.ev-host-form__legend {
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

/* 44px tall. min-width: 0 keeps iOS date fields inside the column. */
.ev-host-form__field {
  min-width: 0;
  min-height: var(--ev-tap-min);

  /* iOS centers a date's value; read it from the left like every other field. */
  &::-webkit-date-and-time-value {
    text-align: start;
  }
}

.ev-host-form__segment {
  --bs-btn-padding-y: 0.5625rem;
}

/* The whole row is the tap target, not only the 1em switch. */
.ev-host-form__switch {
  display: flex;
  align-items: center;
  min-height: var(--ev-tap-min);
}

.ev-host-form__switch-label {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: var(--ev-tap-min);
  padding-left: 0.5rem;
}

.ev-host-form__submit {
  --bs-btn-padding-y: 0.5625rem;

  @media (min-width: 576px) {
    min-width: 10rem;
  }
}

.ev-host-form__remove {
  --bs-btn-padding-y: 0.5625rem;
  overflow-wrap: anywhere;
  text-align: start;
}

/* ev-host-back-link: a secondary link under a page title ("Paste a list instead"). */

.ev-host-back-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ev-tap-min);
}

/* ev-event-form: the event form's own pieces. */

.ev-event-form__card {
  max-height: 20rem;
}

/* ev-guest-list: a household's people on its form, one card each. */

.ev-guest-list {
  display: grid;
  gap: 0.75rem;
}

/* ev-import: the paste box. Long lines wrap rather than widen the page. */

.ev-import__text {
  font-family: var(--bs-font-monospace);
  font-size: 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ev-import__example {
  font-family: var(--bs-font-monospace);
}

/* ev-swatches: the envelope palette (track E's Event::ENVELOPE_COLORS) as radio buttons. Each chip
   shows the paper color with the ink on it. */

.ev-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;

  @media (min-width: 576px) {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

.ev-swatches__item {
  position: relative;
}

.ev-swatches__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--ev-tap-min);
  padding: 0.5rem 0.25rem;
  border: 2px solid transparent;
  border-radius: var(--bs-border-radius-lg);
  cursor: pointer;
}

.ev-swatches__input:checked + .ev-swatches__option {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle);
}

.ev-swatches__input:focus-visible + .ev-swatches__option {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.ev-swatches__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: var(--bs-border-width) solid rgba(0, 0, 0, 0.15);
  background-color: var(--ev-swatch-paper);
  color: var(--ev-swatch-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}

.ev-swatches__name {
  font-size: 0.875rem;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ev-dashboard: the event's header on its dashboard. */

.ev-dashboard__thumb {
  flex-shrink: 0;
  width: 3.5rem;
  height: 5.25rem;
  object-fit: cover;
}

.ev-dashboard__title {
  flex: 1;
  min-width: 0;
}

/* ev-counts: the answers so far. Coming and the spots side by side, the rest in a row below. */

.ev-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1rem;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background-color: var(--bs-tertiary-bg);
}

.ev-counts__yes,
.ev-counts__spots {
  min-width: 0;
}

.ev-counts__label {
  margin-bottom: 0.125rem;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.ev-counts__number {
  margin-bottom: 0;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
}

.ev-counts__detail {
  margin-bottom: 0;
  font-size: 0.875rem;
}

.ev-counts__others {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding-top: 0.75rem;
  border-top: var(--bs-border-width) solid var(--bs-border-color);

  @media (min-width: 576px) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ev-counts__other {
  min-width: 0;
  font-size: 0.875rem;
}

/* ev-tier: one tier's section of the dashboard. */

.ev-tier {
  margin-top: 2rem;
}

.ev-tier__header {
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

/* ev-household-list: the tier's households as cards: one column on a phone, more when wider. */

.ev-household-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;

  @media (min-width: 768px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (min-width: 1200px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}