/* ─────────────────────────────────────────────────────────────────────────
   Materials & Grades — archive-style browser (fastener-finder)

   Progressive enhancement: with JS off, every panel and every grade is
   visible. The .is-enhanced class is added by materials.js, and only then do
   the collapse rules apply — so a crawler or a no-JS visitor gets the whole
   list rather than one panel and a dead button.
   ───────────────────────────────────────────────────────────────────────── */

.fff-materials{
  --fm-line:#D1D5DB; --fm-ink:#191c1d; --fm-mute:#5b5f64;
  --fm-accent:#0a2540; --fm-bg:#f8f9fa;
  margin:1.75rem 0; font-size:14px; color:var(--fm-ink);
}
.fff-materials-title{margin:0 0 .2rem;font-size:1.06rem;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.fff-materials-intro{margin:0 0 .85rem;color:var(--fm-mute);font-size:.82rem;line-height:1.5;max-width:66ch}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.fff-mat-tabs{
  display:flex;flex-wrap:wrap;gap:.25rem;
  padding:0 0 .6rem;margin:0 0 .9rem;border-bottom:1px solid var(--fm-line);
}
.fff-mat-tab{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .6rem;border:1px solid var(--fm-line);border-radius:4px;
  font-size:.78rem;line-height:1.35;font-weight:500;
  color:var(--fm-ink);text-decoration:none;background:#fff;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
}
.fff-mat-tab:hover{border-color:#c4c6ce;background:var(--fm-bg)}
.fff-mat-tab.is-active{background:var(--fm-accent);border-color:var(--fm-accent);color:#fff}
.fff-mat-tab:focus-visible{outline:2px solid var(--fm-accent);outline-offset:2px}
.fff-mat-tab-n{font-size:.68rem;color:var(--fm-mute);font-variant-numeric:tabular-nums}
.fff-mat-tab.is-active .fff-mat-tab-n{color:rgba(255,255,255,.72)}

/* ── Panels ─────────────────────────────────────────────────────────────── */
.fff-mat-panel{scroll-margin-top:88px}
.fff-mat-panel + .fff-mat-panel{margin-top:1.5rem}
.fff-mat-panel-title{
  margin:0 0 .7rem;font-size:.9rem;font-weight:650;letter-spacing:-.005em;color:var(--fm-accent);
}
/* Enhanced: one panel at a time, and its own title is redundant with the tab. */
.fff-materials.is-enhanced .fff-mat-panel{display:none;margin-top:0}
.fff-materials.is-enhanced .fff-mat-panel.is-active{display:block}
.fff-materials.is-enhanced .fff-mat-panel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Subcategory columns ────────────────────────────────────────────────── */
/*
 * Grid with align-items:start, not CSS columns. Columns balance their content
 * and so leave a class with four subcategories sitting in half the available
 * width; the grid uses the full row. align-items:start is what stops a short
 * card (4 ferritic grades) being stretched to the height of a tall one (24
 * austenitic).
 */
.fff-mat-subs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:.65rem;align-items:start;grid-auto-flow:row dense;
}
.fff-mat-sub{
  border:1px solid var(--fm-line);border-radius:4px;background:var(--fm-bg);
  padding:.6rem .7rem .5rem;
}
/* Long subcategories take extra grid columns and split their own list to
   match: 11+ grades -> 2 columns, 18+ -> 3. */
.fff-mat-sub.is-wide{grid-column:span 2}
.fff-mat-sub.is-wide-3{grid-column:span 3}
.fff-mat-sub.is-wide .fff-mat-grades{column-count:2;column-gap:.9rem}
.fff-mat-sub.is-wide-3 .fff-mat-grades{column-count:3;column-gap:.9rem}
.fff-mat-sub.is-wide .fff-mat-grade,
.fff-mat-sub.is-wide-3 .fff-mat-grade{break-inside:avoid;-webkit-column-break-inside:avoid}
.fff-mat-sub.is-wide .fff-mat-grade:first-child,
.fff-mat-sub.is-wide-3 .fff-mat-grade:first-child{border-top:0}

/* Narrow viewports cannot afford three columns of designations. */
@media (max-width:1000px){
  .fff-mat-sub.is-wide-3{grid-column:span 2}
  .fff-mat-sub.is-wide-3 .fff-mat-grades{column-count:2}
}

.fff-mat-sub-title{
  margin:0 0 .45rem;padding-bottom:.35rem;border-bottom:1px solid var(--fm-line);
  font-size:.74rem;font-weight:650;text-transform:uppercase;letter-spacing:.04em;color:var(--fm-mute);
}

/* ── Grades ─────────────────────────────────────────────────────────────── */
.fff-mat-grades{list-style:none;margin:0;padding:0}
.fff-mat-grade{padding:.22rem 0;line-height:1.35}
.fff-mat-grade + .fff-mat-grade{border-top:1px solid rgba(0,0,0,.045)}
.fff-mat-name{display:block;font-size:.81rem;font-weight:600;color:var(--fm-ink);text-decoration:none}
.fff-mat-grade.has-page .fff-mat-name{color:#345076}
.fff-mat-grade.has-page .fff-mat-name:hover{text-decoration:underline}
.fff-mat-alias{
  display:block;font-size:.7rem;color:var(--fm-mute);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;
}

/* Collapsed long tail — only once JS is running. */
.fff-materials.is-enhanced .fff-mat-grade.is-extra{display:none}
.fff-materials.is-enhanced .fff-mat-sub.is-open .fff-mat-grade.is-extra{display:block}

.fff-mat-more{
  display:block;width:100%;margin:.45rem 0 0;padding:.28rem 0;
  border:0;border-top:1px solid var(--fm-line);background:none;
  font:inherit;font-size:.73rem;font-weight:600;color:#345076;cursor:pointer;text-align:left;
}
.fff-mat-more:hover{color:var(--fm-accent)}
.fff-mat-more:focus-visible{outline:2px solid var(--fm-accent);outline-offset:2px}
/* Without JS there is nothing to expand, so the button is not offered. */
.fff-materials:not(.is-enhanced) .fff-mat-more{display:none}

@media (max-width:640px){
  .fff-mat-subs{grid-template-columns:1fr}
  .fff-mat-sub.is-wide,.fff-mat-sub.is-wide-3{grid-column:auto}
  .fff-mat-sub.is-wide .fff-mat-grades,.fff-mat-sub.is-wide-3 .fff-mat-grades{column-count:1}
  .fff-mat-tab{font-size:.75rem;padding:.25rem .5rem}
}

/* ── Precision Industrial System alignment ─────────────────────────────── */
.fff-mat-panel{border-radius:4px;border:1px solid #D1D5DB;box-shadow:none}
.fff-mat-tabs{border-bottom:1px solid #D1D5DB;gap:0}
.fff-mat-tab{border-radius:0;border:0;border-bottom:2px solid transparent;background:none;
  font-size:14px;font-weight:600;color:#43474d;padding:10px 16px}
.fff-mat-tab.is-active,.fff-mat-tab[aria-selected="true"]{color:#345076;font-weight:700;
  border-bottom-color:#345076;background:none}
.fff-mat-tab-n{font-size:12px;font-weight:700;letter-spacing:.1em;color:#5b5f64}
.fff-mat-panel-title,.fff-materials-title{font-weight:700;letter-spacing:-.01em}
.fff-mat-sub-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#43474d}
/* Material grades stay unambiguous: tabular figures, wide tracking. */
.fff-mat-grade{border-radius:2px;background:#edeeef;color:#345076;font-size:14px;
  font-weight:500;letter-spacing:.05em;padding:3px 8px;font-variant-numeric:tabular-nums}
.fff-mat-alias{font-size:12px;color:#5b5f64;letter-spacing:.05em}