/* Keep every tile in the library aligned, including long localized titles and roadmap items. */
body.tools-page .tool-grid{grid-auto-rows:190px}
body.tools-page .tool-card,body.tools-page .tool-card.featured{height:190px;min-height:190px;display:flex;flex-direction:column;box-sizing:border-box}
body.tools-page .tool-card>p{max-height:48px;overflow:hidden}
body.tools-page .tool-card .card-open{margin-top:auto}
/* Tools library — ultra-sharp engineering index. No soft cards, no floating UI. */
body.tools-page{background:#f7f8fa}
body.tools-page .calc-hero{padding-top:72px;padding-bottom:46px;border-bottom:1px solid #aeb8c5}
body.tools-page .calc-hero h1{max-width:940px;font-size:clamp(44px,5vw,72px);line-height:.98;letter-spacing:-.052em}
body.tools-page .calc-hero p{margin-top:18px;font-size:15px;letter-spacing:.01em}
body.tools-page .reading{padding-top:28px;padding-bottom:112px}

body.tools-page .tool-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  background:#fff;
  border-top:1px solid #aeb8c5;
  border-left:1px solid #aeb8c5;
  align-items:stretch;
  counter-reset:tool;
}

body.tools-page .tool-card{
  --accent:#111827;
  --tint:#f8fafc;
  counter-increment:tool;
  position:relative;
  min-height:248px;
  padding:18px 18px 40px;
  border:0;
  border-right:1px solid #aeb8c5;
  border-bottom:1px solid #aeb8c5;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
body.tools-page .tool-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:var(--accent);
  transform:scaleX(.42);
  transform-origin:left center;
  transition:transform .14s ease,height .14s ease;
}
body.tools-page .tool-card::after{
  content:counter(tool,decimal-leading-zero);
  position:absolute;
  right:24px;
  bottom:20px;
  font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:10px;
  line-height:1;
  letter-spacing:.12em;
  color:#a2acb8;
  pointer-events:none;
  transition:color .14s ease;
}
body.tools-page .tool-card:hover,
body.tools-page .tool-card:focus-visible{
  z-index:2;
  background:var(--tint);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 38%,transparent),0 10px 30px rgba(15,23,42,.07);
  transform:translateY(-2px);
  outline:none;
}
body.tools-page .tool-card:hover::before,
body.tools-page .tool-card:focus-visible::before{height:4px;transform:scaleX(1)}
body.tools-page .tool-card:hover::after,
body.tools-page .tool-card:focus-visible::after{color:var(--accent)}
body.tools-page .tool-card:hover h2,
body.tools-page .tool-card:focus-visible h2{color:var(--accent)}
body.tools-page .tool-card:hover .card-open,
body.tools-page .tool-card:focus-visible .card-open{color:var(--accent);transform:translate(2px,-2px)}

body.tools-page .tool-card.featured{--accent:#1769ff;--tint:#f6f9ff;grid-column:auto;min-height:248px;background:#fff}
body.tools-page .tool-card.pro-card,
body.tools-page .tool-card.premium-card{--accent:#6d4aff;--tint:#f2edff;background:linear-gradient(180deg,#fbf9ff 0%,#f4efff 100%);box-shadow:inset 0 0 0 1px rgba(109,74,255,.28),0 7px 20px rgba(82,54,171,.07)}
body.tools-page .tool-card.pro-card::before,
body.tools-page .tool-card.premium-card::before{height:4px;transform:scaleX(1);opacity:1}
body.tools-page .tool-card.pro-card .card-open,
body.tools-page .tool-card.premium-card .card-open{color:#6d4aff}
body.tools-page .tool-card.premium-card .card-head{padding-right:52px}
body.tools-page .tool-card.premium-card:hover,
body.tools-page .tool-card.premium-card:focus-visible{background:linear-gradient(180deg,#f8f4ff 0%,#ece5ff 100%);box-shadow:inset 0 0 0 2px rgba(109,74,255,.48),0 12px 34px rgba(82,54,171,.13)}
body.tools-page .tool-card.accent-cable{--accent:#0f766e;--tint:#f4fbfa}
body.tools-page .tool-card.accent-motor{--accent:#b45309;--tint:#fffaf3}
body.tools-page .tool-card.accent-fundamentals{--accent:#475569;--tint:#f8fafc}
body.tools-page .tool-card.accent-fault{--accent:#b42318;--tint:#fff7f6}
body.tools-page .tool-card.guide-card{--accent:#c38b19;--tint:#fffaf0}

body.tools-page .premium-corner{
  position:absolute;
  top:0;
  right:0;
  width:58px;
  height:58px;
  overflow:hidden;
  pointer-events:none;
  z-index:3;
}
body.tools-page .premium-corner::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:0;
  border-top:58px solid #6d4aff;
  border-left:58px solid transparent;
}
body.tools-page .premium-corner span{
  position:absolute;
  top:10px;
  right:-7px;
  width:52px;
  transform:rotate(45deg);
  color:#fff;
  font-size:7.5px;
  line-height:1;
  font-weight:850;
  letter-spacing:.055em;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 1px 1px rgba(0,0,0,.08);
}

body.tools-page .card-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:start;
}
body.tools-page a[href$="/iec-conduit-fill/"] .edx-title-row h2{font-size:22px;line-height:1.02}
body.tools-page .card-head h2{
  margin:0;
  max-width:300px;
  font-size:25px;
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:700;
  color:#101820;
  transition:color .14s ease;
}

body.tools-page .tool-card>p{
  max-width:340px;
  margin:16px 0 0;
  color:#596574;
  font-size:13px;
  line-height:1.72;
}

body.tools-page .badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start}
body.tools-page .badge{
  border-radius:0;
  border-width:1px;
  padding:5px 7px 4px;
  font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.075em;
  box-shadow:none;
}
body.tools-page .badge-free{color:#126132;border-color:#93c7a4;background:#f0faf3}
body.tools-page .badge-pro{color:#5030bd;border-color:#aa96ea;background:#eee9ff}
body.tools-page .badge-featured{color:#174e9f;border-color:#9fbdea;background:#edf4ff}
body.tools-page .badge-new{color:#075985;border-color:#91cde3;background:#ecf9fe}
body.tools-page .badge-guide{color:#7a5007;border-color:#d9bd73;background:#fff8e7}

body.tools-page .card-open{
  position:absolute;
  left:28px;
  bottom:21px;
  font-size:18px;
  line-height:1;
  font-weight:700;
  color:#87919d;
  transition:color .14s ease,transform .14s ease;
}

@media(max-width:1080px){
  body.tools-page .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  body.tools-page .tool-grid{grid-auto-rows:215px}
  body.tools-page .calc-hero{padding-top:48px;padding-bottom:32px}
  body.tools-page .tool-grid{grid-template-columns:1fr}
  body.tools-page .tool-card,body.tools-page .tool-card.featured{height:215px;min-height:215px;padding:20px 18px 48px;box-sizing:border-box}
  body.tools-page .card-head{gap:12px}
  body.tools-page .card-head h2{font-size:23px}
  body.tools-page .tool-card>p{margin-top:14px;max-height:48px}
  body.tools-page .card-open{left:22px;bottom:18px}
  body.tools-page .tool-card::after{right:20px;bottom:18px}
  body.tools-page .tool-card.premium-card .card-head{padding-right:46px}
  body.tools-page .premium-corner{width:52px;height:52px}
  body.tools-page .premium-corner::before{border-top-width:52px;border-left-width:52px}
  body.tools-page .premium-corner span{top:9px;right:-7px;width:47px;font-size:6.8px;letter-spacing:.04em}
}

body.tools-page .tool-card.coming-soon-card{cursor:default}
body.tools-page .tool-card.coming-soon-card:hover{z-index:1;transform:none;background:linear-gradient(180deg,#fbf9ff 0%,#f4efff 100%);box-shadow:inset 0 0 0 1px rgba(109,74,255,.28),0 7px 20px rgba(82,54,171,.07)}
body.tools-page .tool-card.coming-soon-card:hover::before{height:4px;transform:scaleX(1)}
body.tools-page .tool-card.coming-soon-card:hover h2{color:#101820}
body.tools-page .badge-soon{color:#5b3db4;border-color:#c7b8f5;background:#f6f2ff}
body.tools-page .card-soon{position:absolute;left:28px;bottom:21px;font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:9px;line-height:1;font-weight:800;letter-spacing:.09em;color:#6d4aff}
@media(max-width:680px){body.tools-page .card-soon{left:22px;bottom:18px}}

/* Final compact four-column layout: keep badges out of the title width and prevent hover reflow. */
@media(min-width:1081px){
  body.tools-page .tool-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px}
  body.tools-page .tool-card,
  body.tools-page .tool-card.featured,
  body.tools-page .tool-card.pro-card,
  body.tools-page .tool-card.premium-card,
  body.tools-page .ed-roadmap-card{height:190px!important;min-height:190px!important;box-sizing:border-box}
}
body.tools-page .card-head{display:block;position:relative}
body.tools-page .card-head .badges{position:absolute;top:0;right:0;z-index:2}
body.tools-page .edx-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;width:100%}
body.tools-page .edx-title-row h2{min-width:0;flex:1 1 auto}
body.tools-page .edx-title-row .edx-visual{flex:0 0 86px;width:86px;height:27px;margin-left:0}
body.tools-page .tool-card:hover,
body.tools-page .tool-card:focus-visible{transform:translateY(-2px);z-index:2}
@media(max-width:1080px) and (min-width:681px){
  body.tools-page .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:210px}
  body.tools-page .tool-card,
  body.tools-page .tool-card.featured,
  body.tools-page .ed-roadmap-card{height:210px!important;min-height:210px!important;box-sizing:border-box}
}
@media(max-width:680px){
  body.tools-page .card-head .badges{position:static;justify-content:flex-start;margin-top:10px}
  body.tools-page .edx-title-row .edx-visual{flex-basis:82px;width:82px}
}

/* Keep descriptions readable without colliding with the lower utility row. */
body.tools-page .tool-card>p{
  position:absolute;
  left:18px;
  right:18px;
  bottom:47px;
  margin:0!important;
  max-width:none;
  max-height:none;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}
@media(max-width:680px){
  body.tools-page .tool-card>p{left:18px;right:18px;bottom:45px;max-height:none}
}


/* Order numbers add noise to the tool cards; keep the card content and links unchanged. */
body.tools-page .card-no{display:none!important}
body.tools-page .tool-card::after{content:none!important;display:none!important}