/* Extracted hello page styles from /styles/compat/legacy.css */

/* Single hello animation helpers */
.hello-fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.hello-fade-in.visible { opacity: 1; transform: translateY(0); }

/* Hello form card tweaks (Step 2) */
.hello-card {
  max-width: 600px;
  background-color: var(--surface) !important; /* keep card surface consistent with theme */
}

@media (max-width: 576px) {
  .hello-card {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Step 4: Inputs styling inside hello-card */
.hello-card .form-control {
  padding-top: .55rem;
  padding-bottom: .55rem;
  font-size: 1.02rem;
}
.hello-card .form-label {
  margin-bottom: .35rem;
}
.hello-card .form-text {
  margin-top: .25rem;
}

/* ===== Hello callout ===== */
#hello.hello-callout{
  background: var(--bs-card-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-left: 6px solid color-mix(in srgb, var(--bs-primary) 25%, transparent);
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(17,17,17,.08);
  padding: 20px 22px;
}

/* Заголовок */
#hello h1{
  color: var(--bs-body-color);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

/* Список */
#hello ul{
  padding-left: 1.15rem;   /* висячая отступка */
  margin: .25rem 0 0;
  list-style: disc;
  list-style-position: outside;
}
#hello ul li{
  margin: .5rem 0;
  font-size: clamp(16px, 0.35vw + 15px, 18px);
  line-height: 1.6;
  max-width: 68ch;         /* комфортная длина строки на десктопе */
  height: auto !important; /* снятие хардкодов */
  width: auto !important;
  box-sizing: border-box;
}
#hello ul li::marker{
  color: color-mix(in srgb, var(--bs-primary) 30%, #8F6E4B); /* мягкий акцент-маркер */
  font-size: 1.15em;
}

/* Дедлайн – мягкая плашка, не кричит */
#hello .hello-deadline{
  background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bs-primary) 25%, transparent);
  border-radius: .45rem;
  padding: .05rem .4rem;
  white-space: nowrap;
}

/* Ссылки и разделитель */
#hello a{
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
#hello .sep{ color: var(--bs-secondary); margin: 0 .25rem; }

/* Мобильные правки */
@media (max-width: 576px){
  #hello.hello-callout{ border-radius: 16px; padding: 16px 18px; }
  #hello .simple-list{ padding-left: 1rem; }
  #hello .simple-list li{ margin: .6rem 0; max-width: 100%; }
}