/* Density altitude rules. style.css is the shared Hassle-free Value base. */

.safety {
  margin: 12px 0 18px;
  padding: 8px 12px;
  border-left: 4px solid var(--fail);
  background: var(--panel);
  font-weight: 600;
}

.unit {
  color: var(--muted);
  font-weight: 400;
}

.headline {
  margin: 8px 0 12px;
  font-size: 26px;
  font-weight: 700;
}

.headline small {
  display: block;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

.band {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-left: 6px solid var(--line);
  background: var(--panel);
}

.band p {
  margin: 4px 0;
}

.band-label {
  font-weight: 700;
}

.band-normal {
  border-color: var(--ok);
}

.band-reduced {
  border-color: #b8860b;
}

.band-high {
  border-color: #c25a10;
}

.band-very-high {
  border-color: var(--fail);
}

.marks caption {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
  text-align: left;
}

.marks {
  margin: 8px 0 16px;
}

/* Q175: mode switches use the hidden attribute; a label's display rule must not override it. */
[hidden] {
  display: none !important;
}

.takeoff {
  margin: 0 0 16px;
  padding: 8px 12px;
  border-left: 4px solid var(--line);
  background: var(--panel);
}

.takeoff p {
  margin: 4px 0;
}

.source {
  color: var(--muted);
  font-size: 14px;
}

.compare-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.compare-inputs label {
  flex: 1 1 140px;
}

.compare-list {
  padding-left: 20px;
}

.compare-error,
.compare-note {
  color: var(--muted);
}

/* Q175 item 3: the card preview shows once asked for; on print it is the only thing on the page. */
#card-section {
  display: none;
  margin: 16px 0;
  padding: 12px;
  border: 1px solid var(--line);
}

body.card-open #card-section {
  display: block;
}

.card-table {
  width: 100%;
  font-size: 14px;
}

.card-table th,
.card-table td {
  padding: 3px 4px;
  text-align: right;
}

.card-note,
.card-bands,
.card-footer {
  color: var(--muted);
  font-size: 14px;
}

@media print {
  body.card-open header.site,
  body.card-open footer.site,
  body.card-open main > :not(#card-section) {
    display: none !important;
  }

  body.card-open #card-section {
    border: 0;
    padding: 0;
    break-inside: avoid;
  }
}