/* Heater Applications — layout mirrors the guide pages; reuses htc-* tokens. */
.hap-layout{display:grid;grid-template-columns:260px 1fr;gap:32px;margin-top:14px;align-items:start}
/* Offset from the site's fixed header + sticky sub-nav rather than a
   hardcoded figure, so this panel is never parked underneath them. */
.hap-side{position:sticky;top:calc(var(--ehw-chrome-h, 120px) + 16px);max-height:calc(100vh - var(--ehw-chrome-h, 120px) - 32px);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:18px;font-size:13.5px}
.hap-side-title{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--htc-muted,#5b5f64);text-transform:uppercase;letter-spacing:.5px}
.hap-toc,.hap-side-panel{background:#fff;border:1px solid var(--htc-line,#D1D5DB);border-radius:6px;padding:12px 14px;box-shadow:0 1px 2px rgba(0,15,34,.06)}
.hap-toc-list,.hap-side-list{list-style:none;margin:0;padding:0;line-height:1.85}
.hap-toc-list a,.hap-side-list a{color:var(--htc-primary,#000f22);text-decoration:none;font-weight:600;display:block;border-radius:4px;padding:3px 8px;margin:0 -8px}
.hap-toc-list a:hover,.hap-side-list a:hover{background:var(--htc-bg,#f8f9fa);text-decoration:none}
.hap-side-list{font-weight:500;line-height:1.6}
.hap-side-list li{padding:3px 0;border-bottom:1px dashed var(--htc-line,#D1D5DB)}
.hap-side-list li:last-child{border-bottom:0}

.hap-main{min-width:0}
.hap-head{margin-bottom:10px}
.hap-body section{margin:18px 0}
.hap-body h2{font-size:20px;margin:22px 0 8px}
.hap-apps,.hap-spec{margin:8px 0 0;padding-left:0;list-style:none}
.hap-apps li,.hap-spec li{padding:7px 0;border-bottom:1px solid var(--htc-line,#D1D5DB);line-height:1.55}
.hap-apps li:last-child,.hap-spec li:last-child{border-bottom:0}

.hap-figure{margin:16px 0;border:1px solid var(--htc-line,#D1D5DB);border-radius:6px;overflow:hidden;background:#fff}
.hap-figure img{display:block;width:100%;height:auto}
.hap-figure figcaption{font-size:12.5px;color:var(--htc-muted,#5b5f64);padding:8px 12px;background:var(--htc-bg,#f8f9fa)}

.hap-quote{margin-top:22px;padding:18px;border:1px solid var(--htc-line,#D1D5DB);border-radius:6px;background:var(--htc-bg,#f8f9fa)}
.hap-quote-help{margin:0 0 12px;color:var(--htc-muted,#5b5f64);font-size:14px}
.hap-spec-table{margin-top:24px}
.hap-links{margin-top:24px}
.hap-links h3{font-size:15px;margin:14px 0 6px}

@media(max-width:860px){
  .hap-layout{grid-template-columns:1fr}
  .hap-side{position:static;flex-direction:row;flex-wrap:wrap;gap:12px}
  .hap-toc,.hap-side-panel{flex:1 1 230px}
}

/* ─── Application index / menu page ───────────────────────────────────────
   Mirrors the product archive's type-grid + product-card pattern so the
   front-end feels cohesive across products, guides and applications. */
.hap-index .htc-archive-head{margin-bottom:24px}
.hap-cat-grid{margin-bottom:36px}
.hap-cat-section{margin:34px 0 8px}
.hap-cat-heading{font-size:22px;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid #D1D5DB}
.hap-index-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.hap-index-item{margin:0}
.hap-index-link{display:grid;grid-template-columns:minmax(0,1fr) 116px auto;align-items:end;gap:12px;min-height:154px;padding:14px 16px;border:1px solid #D1D5DB;border-radius:4px;background:#fff;text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease,transform .05s ease}
.hap-index-link:hover{border-color:var(--htc-primary,#345076);box-shadow:0 1px 2px rgba(0,15,34,.06)}
.hap-index-link:active{transform:translateY(1px)}
.hap-index-copy{display:flex;min-width:0;align-self:stretch;flex-direction:column;justify-content:space-between;gap:10px}
.hap-index-name{font-weight:600;font-size:14px;line-height:1.35;color:#191c1d}
.hap-index-meta{display:flex;flex-direction:column;gap:2px;font-size:11px;color:#5b5f64;text-align:left}
.hap-index-sub{font-weight:500}
.hap-index-std{font-family:ui-monospace,Menlo,Consolas,monospace}
.hap-index-thumb{display:block;width:116px;aspect-ratio:4/3;border:1px solid #D1D5DB;border-radius:4px;background:#f8f9fa;overflow:hidden}
.hap-index-thumb img{display:block;width:100%;height:100%;object-fit:contain;padding:6px}
.hap-index-arrow{color:var(--htc-primary,#345076);font-weight:700;font-size:16px;margin-left:4px}
@media(max-width:980px){.hap-index-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.hap-index-list{grid-template-columns:1fr}.hap-index-link{grid-template-columns:minmax(0,1fr) 104px auto;min-height:136px;padding:12px}.hap-index-thumb{width:104px}}

/* ─── Link from product page "Typical Applications" to its application guide */
.htc-app-link{display:inline-block;margin-top:6px;font-weight:600;color:var(--htc-primary,#345076);text-decoration:none}
.htc-app-link:hover{text-decoration:underline}

/* ═══ Answer-first summary (1.1.0) ═══════════════════════════════════════ */
.hap-subhead { margin:.35rem 0 0; color:#5b5f64; font-size:.9375rem; line-height:1.55; }
.hap-answer { border-left:3px solid #345076; padding:0 0 0 1.15rem; margin:1.4rem 0 2rem; }
.hap-answer-lead { font-size:1.0625rem; line-height:1.65; color:#191c1d; margin:0 0 1rem; }
.hap-answer-points { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.55rem 1.5rem; margin:0 0 .9rem; }
.hap-answer-point dt { font-size:.72rem; text-transform:uppercase; letter-spacing:.045em; color:#5b5f64; font-weight:600; margin:0 0 .1rem; }
.hap-answer-point dd { margin:0; font-size:1rem; color:#191c1d; font-weight:600; }
.hap-answer-note { font-size:.8125rem; line-height:1.5; color:#5b5f64; margin:0; }
@media (max-width:640px){ .hap-answer{padding-left:.9rem;} .hap-answer-lead{font-size:1rem;} }

/* ── Precision Industrial System alignment ─────────────────────────────── */
.hap-head h1,.hap-head .hap-title{font-size:clamp(32px,4.6vw,48px);font-weight:700;
  letter-spacing:-.02em;line-height:1.16}
.hap-subhead{font-size:18px;line-height:28px;color:#43474d}
.hap-body{font-size:16px;line-height:24px;color:#43474d}
.hap-cat-heading,.hap-side-title,.hap-index-std,.hap-index-meta{font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#43474d}
.hap-index-item,.hap-figure,.hap-toc,.hap-quote,.hap-side{border-radius:4px;
  border:1px solid #D1D5DB;box-shadow:none;transition:border-color .15s}
.hap-index-item:hover{border-color:#345076;box-shadow:none;transform:none}
.hap-index-name{font-size:16px;font-weight:700;color:#191c1d}
.hap-index-sub{font-size:14px;line-height:20px;color:#43474d}
.hap-index-thumb{border-radius:2px;background:#edeeef;border:1px solid #D1D5DB}
.hap-spec-table{width:100%;border-collapse:collapse;border:1px solid #D1D5DB;font-size:14px}
.hap-spec-table th{background:#e1e3e4;color:#191c1d;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:12px;border-bottom:1px solid #c4c6ce}
.hap-spec-table td{padding:12px;border-bottom:1px solid #D1D5DB}
.hap-spec-table tbody tr:nth-child(even){background:#f8f9fa}
.hap-answer-lead{font-size:18px;line-height:28px}
.hap-quote{background:#f3f4f5}

/* ─── Image slots ───────────────────────────────────────────────────────────
   The media library is supplied by the site owner, so every image slot on an
   application page ships empty. Filled and empty render at the same size, so
   dropping a photograph in does not move anything below it; the empty state
   names the file it is waiting for instead of collapsing to nothing. */
.hap-figure{margin:24px 0 28px;padding:0;border:1px solid #D1D5DB;border-radius:4px;
  background:#f8f9fa;overflow:hidden}
.hap-figure.is-filled img{display:block;width:100%;max-height:430px;object-fit:contain;
  padding:12px;box-sizing:border-box}
.hap-figure-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:220px;padding:24px;text-align:center;
  background-image:repeating-linear-gradient(45deg,#eef0f1 0 10px,#f8f9fa 10px 20px)}
.hap-figure-slot-label{font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#5b5f64}
.hap-figure-slot-file{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  color:#43474d;background:#fff;border:1px solid #D1D5DB;border-radius:3px;padding:3px 8px}
.hap-figure-caption{font-size:13px;line-height:20px;color:#5b5f64;padding:10px 12px;
  border-top:1px solid #D1D5DB;background:#fff;margin:0}
@media(max-width:600px){.hap-figure-slot{min-height:160px;padding:18px}}

/* Hub thumbnails use the same rule: always present, so the three-column card
   grid keeps its shape whether or not an image exists. */
.hap-index-thumb.is-empty{background-image:repeating-linear-gradient(45deg,#e6e8e9 0 8px,#edeeef 8px 16px)}

.hap-cat-note{font-size:14px;line-height:22px;color:#43474d;margin:-6px 0 16px;max-width:78ch}


/* ── Hub list thumbnails ──────────────────────────────────────────────────
 * The empty state keeps its box so the three-column grid does not reflow when
 * photography is added; the filled state contains rather than covers, because
 * these are studio shots of round objects and `cover` slices the outer ring
 * off every one of them.
 */
.hap-index-thumb.is-filled {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}
.hap-index-thumb.is-filled img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
}

/* Second application scene, lower down the page. Slightly smaller than the
   lead image so the page still has a visual hierarchy rather than two equal
   photographs competing. */
.hap-figure-secondary img { max-height: 340px; }

/* "Related Pages" parent link. It is the one link back up to the industry
   hub, so it should not read as another body paragraph. */
.hap-parent { margin: 0 0 14px; font-size: 15px; }
.hap-parent a { font-weight: 650; }