/* Wedding day schedule builder. Loaded after tools.css (listed in the
   page's front matter), and builds on its form, panel and button styles. */

.schedule-date {
  margin: 0 0 1rem;
}

.schedule-form {
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.schedule-form h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

/* Two columns on wider screens, so the hints under time and duration have
   room to breathe. */
.schedule-form .form-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.schedule-form.is-editing {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.schedule-panel-intro {
  max-width: 44rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}

/* The running order */

.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule-item {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  grid-template-areas: "time body actions";
  gap: 0.4rem 1rem;
  align-items: start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-border);
}

.schedule-item:first-child {
  border-top: 1px solid var(--color-border);
}

.schedule-time {
  grid-area: time;
  display: grid;
  gap: 0.1rem;
  font-variant-numeric: tabular-nums;
}

.schedule-start {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
}

.schedule-end,
.schedule-length {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.schedule-body {
  grid-area: body;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding-top: 0.15rem;
}

.schedule-body p {
  margin: 0;
}

.schedule-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.schedule-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.1rem;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.schedule-meta-label {
  color: var(--color-text-muted);
}

.schedule-notes {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* How an item meets the next one. The sentence says it; the edge and
   weight just make it easier to scan. */
.schedule-next {
  justify-self: start;
  margin-top: 0.2rem !important;
  padding: 0.1rem 0 0.1rem 0.6rem;
  border-left: 3px solid var(--color-border-strong);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.schedule-next-gap {
  border-left-style: dashed;
}

.schedule-next-overlap {
  border-left-color: var(--color-accent-3-badge);
  color: var(--color-accent-3-badge);
  font-weight: 600;
}

.schedule-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.15rem 0.5rem;
}

.schedule-icon-actions {
  display: flex;
  gap: 0.15rem;
}

.schedule-shift-here {
  min-height: 2.75rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.schedule-shift-here:hover {
  color: var(--color-accent-dark);
}

/* Phones: time, then the details, then the actions along the bottom, so
   the time and end time fit on one line. */
@media (max-width: 40rem) {
  .schedule-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "time"
      "body"
      "actions";
    gap: 0.3rem;
  }

  .schedule-actions {
    justify-content: flex-start;
    margin-left: -0.4rem;
  }

  .schedule-time {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.5rem;
  }

  .schedule-length::before {
    content: "(";
  }

  .schedule-length::after {
    content: ")";
  }
}

/* Shift and example panels */

.schedule-shift h2,
.schedule-templates h2 {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
}

.schedule-shift-row,
.schedule-template-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}

.schedule-shift-from {
  flex: 1 1 16rem;
  min-width: 0;
}

.schedule-template-row .field {
  flex: 1 1 20rem;
  min-width: 0;
}

.schedule-shift-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

#shift-minutes-error {
  margin-top: 0.6rem;
}

.schedule-copy-fallback {
  margin-top: 1rem;
}

.schedule-copy-fallback .textarea {
  font-size: 0.875rem;
}

@media print {
  .schedule-stats,
  .schedule-date {
    display: none !important;
  }

  .schedule-print-table .schedule-print-time {
    white-space: nowrap;
  }

  .schedule-print-table tr {
    break-inside: avoid;
  }
}