/* Fastener Applications — layout mirrors the guide pages; reuses fff-* tokens. */
.fap-layout{display:grid;grid-template-columns:260px 1fr;gap:32px;margin-top:14px;align-items:start}
.fap-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:18px;font-size:13.5px}
.fap-side-title{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--fff-muted,#6b7886);text-transform:uppercase;letter-spacing:.5px}
.fap-toc,.fap-side-panel{background:#fff;border:1px solid var(--fff-line,#e3e8ee);border-radius:10px;padding:12px 14px;box-shadow:0 1px 2px rgba(15,28,46,.04)}
.fap-toc-list,.fap-side-list{list-style:none;margin:0;padding:0;line-height:1.85}
.fap-toc-list a,.fap-side-list a{color:var(--fff-primary,#1f3a5f);text-decoration:none;font-weight:600;display:block;border-radius:5px;padding:3px 8px;margin:0 -8px}
.fap-toc-list a:hover,.fap-side-list a:hover{background:var(--fff-bg,#f5f7fa);text-decoration:none}
.fap-side-list{font-weight:500;line-height:1.6}
.fap-side-list li{padding:3px 0;border-bottom:1px dashed var(--fff-line,#e3e8ee)}
.fap-side-list li:last-child{border-bottom:0}

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

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

.fap-quote{margin-top:22px;padding:18px;border:1px solid var(--fff-line,#e3e8ee);border-radius:12px;background:var(--fff-bg,#f5f7fa)}
.fap-quote-help{margin:0 0 12px;color:var(--fff-muted,#6b7886);font-size:14px}
.fap-spec-table{margin-top:24px}
.fap-links{margin-top:24px}
.fap-links h3{font-size:15px;margin:14px 0 6px}

@media(max-width:860px){
  .fap-layout{grid-template-columns:1fr}
  .fap-side{position:static;flex-direction:row;flex-wrap:wrap;gap:12px}
  .fap-toc,.fap-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. */
.fap-index .fff-archive-head{margin-bottom:24px}
.fap-cat-grid{margin-bottom:36px}
.fap-cat-section{margin:34px 0 8px}
.fap-cat-heading{font-size:22px;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid #e5e7eb}
.fap-index-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.fap-index-item{margin:0}
.fap-index-link{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease,transform .05s ease}
.fap-index-link:hover{border-color:var(--fff-primary,#1e58c9);box-shadow:0 1px 4px rgba(30,88,201,.10)}
.fap-index-link:active{transform:translateY(1px)}
.fap-index-name{flex:1;font-weight:600;font-size:14px;line-height:1.35;color:#0f172a}
.fap-index-meta{display:flex;flex-direction:column;gap:2px;font-size:11px;color:#64748b;text-align:right;white-space:nowrap}
.fap-index-sub{font-weight:500}
.fap-index-std{font-family:ui-monospace,Menlo,Consolas,monospace}
.fap-index-arrow{color:var(--fff-primary,#1e58c9);font-weight:700;font-size:16px;margin-left:4px}
@media(max-width:600px){.fap-index-list{grid-template-columns:1fr}.fap-index-link{padding:10px 12px}}

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