/* Tool landing pages (/<lang>/tools/<slug>) and the catalogue (/<lang>/tools), smweb/tool_pages.py, 2026-10-13.
   Site v2 look: Montserrat, navy panels, cyan #1fc9f1 with a violet accent. Everything carries the tlp- prefix. */

/* ---------- heading block above the tool */
body.tlp-on .tlp-hero {position:relative;margin:6px 0 18px;padding:20px 24px 18px;border:1px solid rgba(110,170,255,.18);border-radius:18px;
  background:linear-gradient(135deg,rgba(14,26,60,.82),rgba(5,10,28,.74));overflow:hidden;font-family:Montserrat,system-ui,sans-serif}
body.tlp-on .tlp-hero::before {content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#1fc9f1,#8a7dff 55%,transparent)}
body.tlp-on .tlp-hero::after {content:"";position:absolute;right:-120px;top:-140px;width:420px;height:320px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(138,125,255,.18),transparent);pointer-events:none}
.tlp-crumbs {display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;color:rgba(200,214,238,.55);font:600 12px/1.4 Montserrat,sans-serif}
.tlp-crumbs a {color:#6fe3ff;text-decoration:none}
.tlp-crumbs a:hover {color:#fff;text-decoration:underline}
.tlp-crumbs [aria-current] {color:rgba(226,238,255,.82)}
.tlp-hero__row {position:relative;z-index:1;display:flex;gap:16px;align-items:flex-start}
.tlp-hero__icon, .tlp-card__icon {position:relative;flex:none;border:1px solid rgba(31,201,241,.32);
  background:linear-gradient(135deg,rgba(31,201,241,.16),rgba(138,125,255,.18))}
.tlp-hero__icon {width:54px;height:54px;border-radius:15px}
.tlp-hero__icon::after, .tlp-card__icon::after {content:"";position:absolute;inset:22%;background:linear-gradient(135deg,#6fe3ff,#b4a8ff);
  -webkit-mask:var(--tlp-icon) center/contain no-repeat;mask:var(--tlp-icon) center/contain no-repeat}
.tlp-hero__text {min-width:0}
body.tlp-on .tlp-hero h1.tlp-h1 {margin:2px 0 8px;color:#f4f9ff;font:800 clamp(23px,2.3vw,34px)/1.16 Montserrat,sans-serif;letter-spacing:-.02em}
.tlp-lead {max-width:920px;margin:0;color:rgba(214,229,250,.74);font:500 15px/1.62 Montserrat,sans-serif}
.tlp-chips {position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.tlp-chips li {padding:6px 12px;border:1px solid rgba(110,170,255,.22);border-radius:999px;background:rgba(5,10,28,.6);
  color:#d6e6ff;font:700 12px/1.2 Montserrat,sans-serif}
.tlp-chips li.tlp-chip--free, .tlp-card__tag.tlp-chip--free {color:#7dffc4;border-color:rgba(125,255,196,.38);background:rgba(20,70,52,.32)}
.tlp-chips li.tlp-chip--weekly, .tlp-card__tag.tlp-chip--weekly {color:#6fe3ff;border-color:rgba(111,227,255,.4);background:rgba(16,58,78,.32)}
.tlp-chips li.tlp-chip--pro, .tlp-card__tag.tlp-chip--pro {color:#ffd66e;border-color:rgba(255,214,110,.42);background:rgba(80,60,14,.3)}

/* The tool's own heading would repeat the H1 while the page's tool is open. */
body.tlp-on:not(.tlp-away) #pageTitle, body.tlp-on:not(.tlp-away) #pageSub {display:none}
body.tlp-away .tlp-hero, body.tlp-away .tlp-article {display:none}

/* ---------- article under the tool */
.tlp-article {display:grid;gap:26px;width:100%;max-width:1240px;margin:56px auto 28px;font-family:Montserrat,system-ui,sans-serif}
.tlp-cols {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.tlp-block {min-width:0}
.tlp-article h2, .page-tools-hub .tlp-hub__group h2 {margin:0 0 14px;color:#f4f9ff;font:800 20px/1.3 Montserrat,sans-serif;letter-spacing:-.01em}
.tlp-steps {display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:tlp-step}
.tlp-steps li, .tlp-feats li, .tlp-faq details {border:1px solid rgba(110,170,255,.18);border-radius:14px;
  background:linear-gradient(160deg,rgba(14,26,60,.9),rgba(5,10,28,.94))}
.tlp-steps li {counter-increment:tlp-step;display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 14px;padding:15px 16px}
.tlp-steps li::before {content:counter(tlp-step);grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(31,201,241,.45);background:rgba(31,201,241,.14);color:#6fe3ff;font:800 14px Montserrat,sans-serif}
.tlp-steps b, .tlp-feats b {color:#f4f9ff;font:700 15px/1.4 Montserrat,sans-serif}
.tlp-steps p, .tlp-feats p, .tlp-faq p {margin:0;color:rgba(214,229,250,.7);font:500 14px/1.62 Montserrat,sans-serif}
.tlp-feats {display:grid;gap:10px;margin:0;padding:0;list-style:none}
.tlp-feats li {position:relative;display:grid;gap:4px;padding:15px 16px 15px 52px}
.tlp-feats li::before {content:"";position:absolute;left:16px;top:16px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#1fc9f1,#8a7dff)}
.tlp-feats li::after {content:"";position:absolute;left:23px;top:21px;width:6px;height:10px;border:solid #04121a;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.tlp-faq {display:grid;gap:8px}
.tlp-faq details {padding:13px 16px}
.tlp-faq summary {cursor:pointer;color:#f4f9ff;font:700 15px/1.5 Montserrat,sans-serif;list-style:none;display:flex;gap:10px;align-items:center;justify-content:space-between}
.tlp-faq summary::-webkit-details-marker {display:none}
.tlp-faq summary::after {content:"+";flex:none;color:#6fe3ff;font:700 20px/1 Montserrat,sans-serif;transition:transform .2s}
.tlp-faq details[open] summary::after {transform:rotate(45deg)}
.tlp-faq summary:hover {color:#6fe3ff}
.tlp-faq p {margin-top:8px}

/* cards: related tools on a tool page and the whole catalogue */
.tlp-cards {display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
a.tlp-card {display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-areas:"icon tag" "text text";gap:12px;align-items:center;padding:16px;
  border:1px solid rgba(110,170,255,.18);border-radius:14px;background:linear-gradient(160deg,rgba(14,26,60,.92),rgba(5,10,28,.95));
  color:#f4f9ff;text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s}
a.tlp-card:hover {border-color:rgba(111,227,255,.6);box-shadow:0 12px 30px rgba(0,0,0,.3);transform:translateY(-1px)}
a.tlp-card:focus-visible {outline:2px solid #6fe3ff;outline-offset:2px}
.tlp-card__icon {grid-area:icon;width:42px;height:42px;border-radius:12px}
.tlp-card__text {grid-area:text;min-width:0}
.tlp-card__text b {display:block;color:#f4f9ff;font:700 15px/1.35 Montserrat,sans-serif}
.tlp-card__text small {display:block;margin-top:4px;color:rgba(200,214,238,.66);font:500 13px/1.5 Montserrat,sans-serif}
.tlp-card__tag {grid-area:tag;justify-self:end;align-self:center;padding:3px 8px;border:1px solid;border-radius:999px;font:700 10px/1.3 Montserrat,sans-serif;white-space:nowrap}
.tlp-all {display:inline-block;margin-top:14px;color:#6fe3ff;font:700 14px/1.4 Montserrat,sans-serif;text-decoration:none}
.tlp-all:hover {color:#fff;text-decoration:underline}
.tlp-guide-links {display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.tlp-guide-links a {display:flex;justify-content:space-between;gap:12px;padding:14px 16px;border:1px dashed rgba(110,170,255,.3);border-radius:14px;
  background:rgba(5,10,28,.5);color:#e9f3ff;font:700 14px/1.45 Montserrat,sans-serif;text-decoration:none;transition:border-color .18s,color .18s}
.tlp-guide-links a:hover {border-color:rgba(111,227,255,.6);color:#6fe3ff}
.tlp-guide-links span {flex:none;color:#6fe3ff}
a.tlp-top {justify-self:center;padding:11px 20px;border:1px solid rgba(31,201,241,.5);border-radius:999px;background:rgba(31,201,241,.08);
  color:#6fe3ff;font:700 14px/1.2 Montserrat,sans-serif;text-decoration:none;transition:background .18s,color .18s}
a.tlp-top:hover {background:#1fc9f1;color:#03131a}

/* ---------- catalogue page /<lang>/tools (static/guide.html template) */
.page-tools-hub .guide {width:min(100% - 32px,1240px)}
.page-tools-hub .tlp-hub__count {margin:-12px 0 30px;color:rgba(200,214,238,.6);font:600 13px/1.5 Montserrat,sans-serif}
.page-tools-hub .tlp-hub__group {margin:0 0 34px}

@media (max-width:900px) {
  .tlp-cols {grid-template-columns:minmax(0,1fr)}
  body.tlp-on .tlp-hero {padding:16px 16px 14px;border-radius:16px}
  .tlp-hero__icon {width:42px;height:42px;border-radius:12px}
  .tlp-lead {font-size:14px}
  .tlp-article {margin-top:40px}
}
@media (max-width:520px) {
  .tlp-hero__icon {display:none}
  .tlp-card__icon {width:38px;height:38px}
  .tlp-cards, .tlp-guide-links {grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce) {
  a.tlp-card, .tlp-faq summary::after {transition:none}
}