/* =====================================================================
   Info — steel grades, standards & norms (/info/steel-standards).
   Its own sheet rather than tools.css, which is the weight calculator's
   and is pinned to that page. The look is the same: a fluid .wrap, white
   cards, brand blue. Nothing here widens the page: every table scrolls
   inside .ts-scroll, and every flex/grid child carries min-width:0.
   ===================================================================== */
.ts-wrap{padding-top:28px;padding-bottom:64px}
.ts-wrap h1{font-size:34px;line-height:1.15;letter-spacing:-.02em;margin:4px 0 0}
.ts-wrap .kick{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}

/* On this page — sticky on a desktop (the site header is overlaid, not
   sticky, so top:0 is clear of it), one row of chips that scrolls inside
   itself on a phone. */
.ts-jump{display:flex;align-items:center;gap:10px 14px;margin:20px 0 0;padding:10px 14px;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(15,31,74,.06);min-width:0}
.ts-jump-h{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);flex:none}
.ts-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.ts-jump a{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--blue-10,#E8EEFA);color:var(--blue,#1F3F8F);
  font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.ts-jump a:hover{background:#D5E0F5}
.ts-jump a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (min-width:1024px){
  .ts-jump{position:sticky;top:0;z-index:var(--z-raised)}
}
@media (max-width:1023px){
  .ts-jump{flex-direction:column;align-items:stretch}
  .ts-jump ul{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:4px}
}

.ts-card{margin-top:18px;padding:22px;min-width:0;scroll-margin-top:84px}
.ts-card h2{font-size:21px;margin:0 0 12px;color:var(--navy)}
.ts-card h3{font-size:16px;margin:22px 0 10px}
.ts-card h2 + h3{margin-top:4px}
.ts-card p,.ts-card li,.ts-card dd{font-size:15px;line-height:1.6;color:#334155}
.ts-warn{margin:0 0 6px;padding:10px 14px;border-radius:10px;background:#FFF7E6;border:1px solid #F5D9A6;color:#7A4B00;font-size:14px}
.ts-note{font-size:13.5px;color:var(--mute);margin:10px 0 0}

/* Tables scroll inside their card; focusable so a keyboard can scroll them. */
.ts-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:12px}
.ts-scroll:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.ts-tbl{border-collapse:collapse;width:100%;font-size:14px}
.ts-tbl th,.ts-tbl td{border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top;white-space:nowrap}
.ts-tbl tbody tr:last-child > *{border-bottom:0}
.ts-tbl thead th{background:#F3F6FB;color:var(--navy);font-weight:700;font-size:13px}
.ts-tbl tbody tr:nth-child(even){background:#FAFBFD}
.ts-tbl tbody th{font-weight:600;color:var(--ink)}
/* Prose columns wrap; a code column does not. */
.ts-tbl-wrap td,.ts-tbl-wrap tbody th{white-space:normal}
.ts-tbl-wrap tbody th{min-width:160px}

/* How to read a grade: small cards. */
.ts-read{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ts-read-c{border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0;background:#FAFBFD}
.ts-read-code{font-size:20px;font-weight:800;color:var(--blue,#1F3F8F);letter-spacing:.01em}
.ts-read-sys{font-size:12.5px;color:var(--mute);margin:2px 0 10px}
.ts-read dl{margin:0;display:grid;gap:6px}
.ts-read dl > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:baseline}
.ts-read dt{font-weight:700;color:var(--navy);font-size:14px;min-width:34px}
.ts-read dd{margin:0;font-size:14px;line-height:1.45}

/* Standards organisations. */
.ts-orgs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.ts-orgs li{border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0;display:flex;flex-direction:column;gap:2px}
.ts-org-r{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.ts-org-n{font-size:13.5px;line-height:1.45;color:#334155;overflow-wrap:anywhere}
.ts-card a[target="_blank"]{display:inline-flex;align-items:center;gap:4px}
.ts-ext{flex:none;opacity:.7}

.ts-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
.ts-two h3{margin-top:4px}
.ts-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ts-links li{min-width:0;overflow-wrap:anywhere}
.ts-links span{color:#475569}

.ts-gloss{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px}
.ts-gloss > div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.ts-gloss dt{font-weight:700;color:var(--navy);font-size:14px}
.ts-gloss dd{margin:0;font-size:14px;line-height:1.45}

.ts-help{margin-top:22px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--blue-10,#E8EEFA);border:1px solid #C9D6F0}
.ts-help h2{font-size:18px;margin:0;color:var(--navy)}
.ts-help p{margin:2px 0 0;color:#334155}
.ts-more{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:14.5px;font-weight:600}
.ts-disclaimer{margin:14px 0 0;font-size:13px;color:var(--mute);max-width:780px}

@media (max-width:760px){
  .ts-two,.ts-gloss{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ts-wrap h1{font-size:26px}
  .ts-card{padding:16px}
  .ts-orgs{grid-template-columns:minmax(0,1fr)}
}