/* Free tools (psychrometric chart, piping pressure drop) – uses the site's design tokens. Loaded only on /tools/* pages. */

.tool { color: var(--text); font-size: 0.9rem; line-height: 1.4; }

.tool-controls {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.1rem; align-items: end;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--shadow-s);
}
.tool .fld { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; }
.tool .lbl { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.tool .sep { align-self: stretch; width: 1px; background: var(--line); margin: 0 0.1rem; }

.tool input[type="number"], .tool input[type="text"], .tool select {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  padding: 0.45rem 0.6rem; min-height: 2.3rem; width: 7rem;
}
.tool select { width: auto; min-width: 11rem; max-width: 100%; }
.tool .fld.wide select { min-width: 17rem; }
.tool input:focus-visible, .tool select:focus-visible, .tool-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tool input[aria-invalid="true"] { border-color: var(--error); }

.tool-btn {
  font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer;
  color: var(--accent-text); background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius-s); padding: 0.45rem 0.9rem; min-height: 2.3rem;
}
.tool-btn:hover { background: var(--accent-soft); }
.tool-btn--primary { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }
.tool-btn--primary:hover { background: var(--accent-text-hover); }
.tool-btn[disabled] { opacity: 0.55; cursor: progress; }

.tool-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.6rem; margin-bottom: 1rem; box-shadow: var(--shadow-s);
}
.tool #psy-chart svg { width: 100%; height: auto; display: block; }

.tool .msg { border-radius: var(--radius-s); padding: 0.55rem 0.8rem; margin-bottom: 0.75rem; font-size: 0.85rem; }
.tool .msg.warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.tool .msg.err { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.tool .msg.ok { background: #e7f6ec; color: #14532d; border: 1px solid #86d3a1; }

.tool .tbl { padding: 0.8rem 0.9rem; overflow-x: auto; }
.tool .tbl h3 { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 600; font-family: var(--font-body); color: var(--ink); }
.tool .tbl h3 small { font-weight: 400; color: var(--muted); margin-left: 0.5rem; font-size: 0.78rem; }
.tool table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.tool th, .tool td { padding: 0.3rem 0.65rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tool th { font-weight: 600; color: var(--muted); font-size: 0.78rem; }
.tool th.l, .tool td.l { text-align: left; }
.tool .dot { display: inline-block; width: 1.25rem; height: 1.25rem; line-height: 1.25rem; border-radius: 50%; color: #fff; font-size: 0.7rem; font-weight: 700; text-align: center; }

/* Piping tool ------------------------------------------------------------- */
.piping { --calc: #067647; --calc-bg: #eaf6ef; --warn: #b54708; --warn-bg: #fff4e5; --err-bg: #fdecea; }
.piping .layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 1200px) { .piping .layout { grid-template-columns: minmax(0, 1fr) 31rem; } .piping .side { position: sticky; top: calc(var(--header-h) + 0.75rem); } }

.piping section, .piping .results { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--shadow-s); }
.piping .results { margin-bottom: 0; }
.piping h2 { font-family: var(--font-body); font-size: 1rem; margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.5rem; color: var(--ink); }
.piping h3 { font-family: var(--font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 1rem 0 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--line); }
.piping section h2 + h3 { margin-top: 0; }

.piping .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; align-items: end; }
.piping label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.2rem; }
.piping input, .piping select { width: 100%; min-width: 0; }
.piping input.calc, .piping select.calc { background: var(--calc-bg); color: var(--calc); font-style: italic; border-color: transparent; }
.piping input.missing, .piping select.missing { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.piping .tag { display: inline-block; font-size: 0.65rem; font-style: normal; background: var(--calc-bg); color: var(--calc); border-radius: 4px; padding: 0 0.3rem; margin-left: 0.25rem; }
.piping .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; grid-column: span 2; align-items: end; }

.piping table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.piping .table-wrap { overflow-x: auto; }
.piping th, .piping td { text-align: left; padding: 0.35rem; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.piping th { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.piping td.name { font-weight: 600; }
.piping td.num, .piping th.num { text-align: right; font-variant-numeric: tabular-nums; }
.piping #lines input, .piping #lines select { min-width: 5.5rem; }
.piping #lines td.dia select { min-width: 12.5rem; }

.piping .pill { font-size: 0.75rem; border-radius: 999px; padding: 0.15rem 0.65rem; display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.piping .pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.piping .pill.ok { background: var(--calc-bg); color: var(--calc); }
.piping .pill.busy, .piping .pill.warn { background: var(--warn-bg); color: var(--warn); }
.piping .pill.busy i { animation: tool-blink 1s infinite; }
.piping .pill.bad { background: var(--err-bg); color: var(--error); }
@keyframes tool-blink { 50% { opacity: 0.25; } }

.piping .resbody { transition: opacity 0.15s; }
.piping .stale .resbody { opacity: 0.45; }
.piping .stalenote { font-size: 0.78rem; color: var(--warn); margin: 0 0 0.5rem; }
.piping .rhead { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.piping .rhead h2 { margin: 0; }
.piping .btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.piping button.ghost, .piping button.primary { font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer; border-radius: var(--radius-s); padding: 0.45rem 0.9rem; min-height: 2.3rem; }
.piping button.ghost { background: var(--surface); color: var(--accent-text); border: 1px solid #4188ff; }
.piping button.ghost:hover { background: var(--accent-soft); }
.piping button.primary { background: #4188ff; color: #fff; border: 1px solid #4188ff; }
.piping button.primary:hover { background: #2f6fe0; border-color: #2f6fe0; }
.piping button:disabled { opacity: 0.5; cursor: default; }
.piping button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.piping .updated { color: var(--muted); font-size: 0.78rem; margin-left: auto; align-self: center; }
.piping .noresult { color: var(--muted); padding: 0.9rem 0.35rem; white-space: normal; }

.piping .missingbox { background: var(--err-bg); color: var(--error); border: 1px solid var(--error); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0.75rem 0 0; font-size: 0.85rem; }
.piping .missingbox ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.piping .hint { color: var(--muted); font-size: 0.78rem; margin: 0.5rem 0 0; }
.piping .toolbar { display: flex; gap: 0.5rem; margin: 0 0 1rem; }
.piping .toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 0.5rem 0.9rem; border-radius: 8px; font-size: 0.85rem; display: flex; align-items: center; gap: 0.9rem; z-index: 50; }
.piping .toast button { background: transparent; border: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }

/* Short description above a tool: one sentence, then what you enter / get / extra in three cards */
.tool-about__lead { margin: 0 0 1.25rem; max-width: 72ch; font-size: var(--step-0); line-height: 1.65; color: var(--text); }
.tool-about__cols { display: grid; gap: 1rem; }
@media (min-width: 900px) { .tool-about__cols { grid-template-columns: 1.15fr 1.15fr 0.8fr; gap: 1.25rem; } }

.tool-card-info { --tone: var(--brand-blue); position: relative; padding: 1.25rem 1.35rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--tone); border-radius: var(--radius); box-shadow: var(--shadow-s); }
.tool-card-info--get { --tone: var(--brand-green); }
.tool-card-info--extra { --tone: var(--dark-bg); }
.tool-card-info__step { position: absolute; top: 1rem; right: 1.1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; color: #fff; background: var(--tone); }
.tool-card-info h2 { margin: 0 0 0.9rem; font-size: 1.2rem; font-family: var(--font-display); color: var(--ink); }
.tool-card-info__label { margin: 1rem 0 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tool-card-info h2 + .tool-card-info__label { margin-top: 0; }

.tool-card-info .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.tool-card-info .chips li { padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.86rem; color: var(--ink); background: color-mix(in srgb, var(--tone) 14%, white); border: 1px solid color-mix(in srgb, var(--tone) 35%, white); }

.tool-card-info .ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.tool-card-info .ticks li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.93rem; line-height: 1.4; color: var(--text); }
.tool-card-info .ticks svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; padding: 0.15rem; border-radius: 50%; background: color-mix(in srgb, var(--tone) 18%, white); color: var(--ink); }

/* Psychrometric chart: tap/click opens a large view (readable on a phone) */
.tool-card:has(#psy-chart) { position: relative; cursor: zoom-in; }
.tool-card:has(#psy-chart)::after { content: "Tap to enlarge"; position: absolute; right: 0.75rem; top: 0.6rem; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.75rem; color: #fff; background: rgba(11, 18, 32, 0.78); pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.tool-card:has(#psy-chart):hover::after { opacity: 1; }
@media (hover: none) { .tool-card:has(#psy-chart)::after { opacity: 1; } }