/* Hallmark · component: engineering decision tools · genre: technical editorial · theme: SinoOil locked design system */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */

html,
body {
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-style: normal;
}

.tool-extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4, 1rem);
  margin-block: var(--space-5, 1.25rem);
  min-width: 0;
}

.tool-extra-field {
  min-width: 0;
}

.tool-extra-field label {
  display: block;
  margin-block-end: var(--space-2, .5rem);
  color: var(--color-text);
  font-weight: 700;
}

.tool-extra-field input,
.tool-extra-field select {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding-inline: var(--space-3, .75rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, .5rem);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--color-surface-2, var(--color-surface));
  color: var(--color-text);
  font: inherit;
}

.tool-extra-field input:focus-visible,
.tool-extra-field select:focus-visible,
.op-btn:focus-visible,
.cap-btn:focus-visible,
.config-btn:focus-visible,
.region-btn:focus-visible,
.oil-btn:focus-visible,
.hours-btn:focus-visible,
.output-btn:focus-visible {
  outline-color: var(--color-primary);
}

.tool-extra-field input[aria-invalid="true"],
.tool-extra-field select[aria-invalid="true"] {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent-light) 45%, var(--color-surface-2));
}

.tool-extra-field input:active,
.tool-extra-field select:active {
  background: var(--color-surface-offset);
}

.tool-extra-field input:disabled,
.tool-extra-field select:disabled {
  opacity: .55;
  cursor: not-allowed;
  color: var(--color-text-muted);
}

.tool-extra-field input[data-state="loading"],
.tool-extra-field select[data-state="loading"] {
  cursor: progress;
}

.tool-extra-field input[data-state="success"],
.tool-extra-field select[data-state="success"] {
  border-color: var(--color-primary);
}

.tool-helper,
.tool-field-error {
  min-height: 1.35em;
  margin: var(--space-1, .25rem) 0 0;
  color: var(--color-text-muted);
  font-size: .82rem;
  line-height: 1.35;
}

.tool-field-error,
.tool-error-summary {
  color: var(--color-accent);
  font-weight: 700;
}

.tool-error-summary {
  display: none;
  margin-block: var(--space-3, .75rem);
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md, .5rem);
  background: color-mix(in srgb, var(--color-accent-light) 55%, var(--color-surface-2));
}

.tool-error-summary.is-visible {
  display: block;
}

.tool-assumptions {
  margin-block-start: var(--space-4, 1rem);
  padding: var(--space-4, 1rem);
  border-inline-start: 3px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary-light) 55%, var(--color-surface-2));
  color: var(--color-text-muted);
  font-size: .9rem;
  line-height: 1.55;
}

.tool-assumptions strong {
  color: var(--color-text);
}

.tool-result-note {
  margin-block-start: var(--space-3, .75rem);
  color: var(--color-text-muted);
  font-size: .86rem;
  line-height: 1.5;
}

.tool-scope-note {
  margin-block: var(--space-5, 1.25rem);
  padding: var(--space-4, 1rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, .75rem);
  background: var(--color-surface-2, var(--color-surface));
}

.tool-scope-note h2,
.tool-scope-note h3 {
  margin: 0 0 var(--space-2, .5rem);
  color: var(--color-primary);
  font-style: normal;
}

.tool-scope-note p {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 70ch;
}

.tool-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-4, 1rem);
  margin-block: var(--space-6, 1.5rem);
}

.tool-tier-card {
  padding: var(--space-5, 1.25rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, .75rem);
  background: var(--color-surface-2, var(--color-surface));
}

.tool-tier-card h2,
.tool-tier-card h3 {
  margin: 0 0 var(--space-2, .5rem);
  color: var(--color-primary);
  font-style: normal;
}

.tool-tier-card p {
  margin: 0;
  color: var(--color-text-muted);
}

@media (hover: hover) and (pointer: fine) {
  .tool-extra-field input:hover,
  .tool-extra-field select:hover {
    background: var(--color-surface-offset);
  }
}

@media (max-width: 56.25rem) {
  .header .header-actions .btn-primary {
    display: none;
  }

  .header .nav-toggle {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
  }
}

@media (max-width: 25.875rem) {
  .tool-extra-grid,
  .tool-tier-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .op-btn,
  .btn-primary,
  .btn-whatsapp {
    max-width: 100%;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-extra-field *,
  .tool-error-summary {
    transition-duration: .01ms !important;
  }
}