/* Screen defaults */
@media screen {
  .print-only {
    display: none !important;
  }
}

/* Step help tooltips */
.step-help-btn {
  line-height: 0;
}

.step-tooltip {
  pointer-events: auto;
}

.step-tooltip::before,
.step-tooltip::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.step-tooltip::before {
  top: -8px;
  border-bottom: 8px solid #bfdbfe; /* border-blue-200 */
}

.step-tooltip::after {
  top: -6px;
  border-bottom: 8px solid #ffffff;
}

/* Print-friendly view */
@media print {
  .print-only {
    display: block !important;
  }
  body {
    color: #000;
  }
  a[href]:after {
    content: "";
  } /* remove link URLs on print */
  /* Slightly smaller type for compact, denser print */
  #printSummary {
    font-size: 12px;
  }
  #printSummary h3 {
    font-size: 13px;
  }
  #printSummary th,
  #printSummary td {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  /* Print summary table column tuning */
  #printSummary table {
    table-layout: fixed;
    width: 100%;
  }
  #printSummary td {
    vertical-align: top;
  }
  /* Softer header weight for print */
  #printSummary th {
    font-weight: 400;
  }

  /* Oils table: # | Oil | % | lb | oz | g */
  #printSummary .print-oils-table th,
  #printSummary .print-oils-table td {
    overflow: hidden;
  }

  #printSummary .print-oils-table td:first-child,
  #printSummary .print-oils-table th:first-child {
    width: 6%;
    text-align: left;
    padding-right: 0.5rem;
  }

  #printSummary .print-oils-table td:nth-child(2),
  #printSummary .print-oils-table th:nth-child(2) {
    width: 34%;
    padding-right: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #printSummary .print-oils-table td:nth-child(3),
  #printSummary .print-oils-table th:nth-child(3) {
    width: 10%;
    overflow: visible;
    white-space: nowrap;
  }

  #printSummary .print-oils-table td:nth-child(4),
  #printSummary .print-oils-table th:nth-child(4),
  #printSummary .print-oils-table td:nth-child(5),
  #printSummary .print-oils-table th:nth-child(5),
  #printSummary .print-oils-table td:nth-child(6),
  #printSummary .print-oils-table th:nth-child(6) {
    width: 16%;
    white-space: nowrap;
  }
  #printSummary .print-oils-table td:nth-child(6),
  #printSummary .print-oils-table th:nth-child(6) {
    width: 18%;
  }

  /* Settings table: Key | Value */
  #printSummary .print-settings-table td:first-child {
    width: 75%;
    padding-right: 0.75rem;
  }
  #printSummary .print-settings-table td:nth-child(2) {
    width: 25%;
  }

  #printSummary .print-oils-table tfoot td {
    border-top: 1px solid #d1d5db;
    font-weight: 600;
    text-align: right;
  }

  #printSummary .no-break {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  #printSummary .recipe-name-value {
    display: inline-block;
    min-width: 14rem;
    text-align: right;
  }

  /* Avoid awkward page breaks */
  #printSummary h3 {
    break-after: avoid;
  }
  #printSummary table {
    break-inside: avoid;
  }

  #printSummary .share-box .break-all {
    word-break: break-all;
  }
}

/* Fallback gauge styles (in case external CSS isn't loaded) */
.gauge-track {
  height: 0.5rem;
  border-radius: 9999px;
  background: #e5e7eb;
}
.gauge-fill {
  height: 0.5rem;
  border-radius: 9999px;
}
.ok {
  background: #10b981;
} /* green */
.warn {
  background: #f59e0b;
} /* amber */
.bad {
  background: #ef4444;
} /* red */

@media print and (max-width: 480px) {
  /* On very narrow printouts, right-align the Oil name for cleaner rag */
  #printSummary .print-oils-table th:nth-child(2),
  #printSummary .print-oils-table td:nth-child(2) {
    text-align: right;
  }
}