/* ============================================================
   FISPQ search container (public search page)
   ============================================================ */

.fispq-search {
  position: relative;
}

.fispq-search__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .fispq-search__form {
    flex-direction: row;
    align-items: stretch;
  }

  .fispq-search__form > div {
    flex: 1;
  }

  .fispq-search__form .form-input {
    margin-top: 0;
    height: 100%;
  }
}

/* ============================================================
   FISPQ show page layout
   ============================================================ */

.fispq-page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, var(--color-info-bg), var(--color-border-subtle));
}

.fispq-container {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-12) var(--space-6);
}

.fispq-header {
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-ambient);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.fispq-header__title {
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--color-on-surface);
  letter-spacing: var(--tracking-headline);
  margin-bottom: var(--space-2);
  margin: 0;
  font-family: var(--font-display);
}

.fispq-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.fispq-download-link {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
}

.fispq-download-link:hover {
  color: var(--color-primary-dim);
  text-decoration: underline;
}

/* ============================================================
   FISPQ form section cards (edit page)
   ============================================================ */

.fispq-section {
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-ambient);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
}

.fispq-section__title {
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-on-surface);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-3);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-headline);
}

/* ============================================================
   FISPQ section body (accordion content)
   ============================================================ */

.fispq-section__body {
  background-color: var(--color-white);
}

.fispq-section__body > * + * {
  margin-top: var(--space-6);
}

/* ============================================================
   FISPQ field display (dt / dd)
   ============================================================ */

.fispq-field > * + * {
  margin-top: var(--space-6);
}

.fispq-field__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
  display: block;
}

.fispq-field__value {
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--color-on-surface);
  line-height: var(--leading-relaxed);
}

.fispq-field__value--highlight {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-primary);
  line-height: var(--leading-relaxed);
}

.fispq-field__indent {
  padding-left: var(--space-6);
}

.fispq-field__indent-item {
  margin-bottom: var(--space-6);
}

/* ============================================================
   GHS classification highlight box (amber — section 2)
   ============================================================ */

.fispq-ghs-box {
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  /* warning-bg is now tertiary-container — sophisticated caution, no jarring yellow */
}

.fispq-ghs-box__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-warning-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
  display: block;
}

.fispq-ghs-box__value {
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--color-warning-value);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   Document date highlight box (slate — section 9)
   ============================================================ */

.fispq-date-box {
  background-color: var(--color-info-bg);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

.fispq-date-box + .fispq-date-box {
  margin-top: var(--space-4);
}

.fispq-date-box__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
  display: block;
}

.fispq-date-box__value {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-on-surface);
}

/* ============================================================
   Alert highlight box (red — first aid, toxicological)
   ============================================================ */

.fispq-alert-box {
  background-color: var(--color-error-bg);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

.fispq-alert-box__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-error-strong);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
  display: block;
}

.fispq-alert-box__value {
  font-size: var(--text-base);
  font-weight: 300;
  color: var(--color-error-strong);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   Eco highlight box (green — spill response, ecological)
   ============================================================ */

.fispq-eco-box {
  background-color: var(--color-success-bg);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

.fispq-eco-box__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-success-strong);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
  display: block;
}

.fispq-eco-box__value {
  font-size: var(--text-base);
  font-weight: 300;
  color: var(--color-success-strong);
  line-height: var(--leading-relaxed);
}