/* Learn AI Earn — Tools section
 * Loaded ONLY on the Tools hub, tool category/tag pages and single tool pages.
 * Every selector sits under .lae-tools-scope and every new class starts with
 * lae-tool-. Colors and sizes come from the theme tokens (colors.css and the
 * :root scale in style.css); nothing here restyles a global selector. */

.lae-tools-scope [hidden]{display:none!important}
.lae-tools-scope.lae-tool-single{padding-bottom:var(--section-gap)}

/* ---- filter bar (uses the theme's .lae-filter-bar; controls mirror the Blog filter) ---- */
.lae-tools-scope .lae-tool-filters input[type=search]{flex:1 1 220px;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--soft);outline:0;font:inherit;font-size:16px;color:var(--color-heading)}
.lae-tools-scope .lae-tool-filters select{flex:0 1 190px;height:44px;padding:0 34px 0 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background-color:var(--soft);background-image:linear-gradient(45deg,transparent 50%,var(--color-body) 50%),linear-gradient(135deg,var(--color-body) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;-webkit-appearance:none;appearance:none;outline:0;font:inherit;font-size:var(--fs-sm);color:var(--color-heading)}
.lae-tools-scope .lae-tool-filters input[type=search]:focus,.lae-tools-scope .lae-tool-filters select:focus{border-color:var(--color-main);background-color:var(--paper)}
.lae-tools-scope .lae-tool-filters input:focus-visible,.lae-tools-scope .lae-tool-filters select:focus-visible{outline:2px solid var(--color-main);outline-offset:2px}
.lae-tools-scope .lae-tool-status{margin:0 0 20px;font-size:var(--fs-sm);color:var(--color-body)}

/* ---- card grid ---- */
.lae-tools-scope .lae-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.lae-tools-scope .lae-tool-card{display:flex;flex-direction:column;min-width:0}
.lae-tools-scope .lae-tool-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);background:var(--tint-main)}
.lae-tools-scope .lae-tool-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.lae-tools-scope .lae-tool-card:hover .lae-tool-thumb img{transform:scale(1.05)}
.lae-tools-scope .lae-tool-thumb-icon{display:grid;place-items:center;width:100%;height:100%;color:var(--color-icon)}
.lae-tools-scope .lae-tool-badges{position:absolute;left:12px;top:12px;display:flex;flex-wrap:wrap;gap:6px}
.lae-tools-scope .lae-tool-badge{padding:5px 11px;border-radius:999px;background:var(--color-dark);background:color-mix(in srgb,var(--color-button) 78%,var(--color-dark));color:var(--paper);font-size:var(--fs-2xs);font-weight:700;line-height:1.2}
.lae-tools-scope .lae-tool-badge--status{background:var(--paper);color:var(--color-heading)}
.lae-tools-scope .lae-tool-card-title{margin:14px 0 8px;font-size:var(--fs-h3);line-height:1.35;letter-spacing:0}
.lae-tools-scope .lae-tool-card-title a{color:var(--color-heading);transition:color .25s var(--ease)}
.lae-tools-scope .lae-tool-card-title a:hover{color:var(--color-button-hover)}
.lae-tools-scope .lae-tool-card-text{margin:0 0 18px;color:var(--color-body)}
.lae-tools-scope .lae-tool-card .lae-tool-open{align-self:flex-start;margin-top:auto}

.lae-tools-scope .lae-tool-empty{padding:40px 0;text-align:center}
.lae-tools-scope .lae-tool-empty .lae-btn{margin-top:14px}
.lae-tools-scope .lae-tool-pagination{margin-top:38px}
.lae-tools-scope .lae-tool-pagination ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;margin:0;padding:0;list-style:none}

/* ---- intro / SEO text below the grid ---- */
.lae-tools-scope .lae-tool-intro{max-width:760px;margin:var(--section-gap) auto 0}

/* ---- single tool: workspace ---- */
.lae-tools-scope .lae-tool-app{min-height:var(--lae-tool-min,520px);margin:0 0 var(--section-gap);padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.lae-tools-scope .lae-tool-noscript{margin:0;padding:16px;border-radius:var(--radius-sm);background:var(--tint-main);color:var(--color-heading)}
.lae-tools-scope .lae-tool-article{max-width:760px;margin:0 auto var(--section-gap)}
.lae-tools-scope .lae-tool-updated{margin:0 0 20px;font-size:var(--fs-sm);color:var(--color-body)}
.lae-tools-scope .lae-tool-updated time{font-weight:700;color:var(--color-heading)}
/* The theme's drop cap belongs to blog posts, not to tool guides. */
.lae-tools-scope .entry-content>p:first-of-type:first-letter{float:none;margin:0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}
.lae-tools-scope .lae-tool-related{margin:0 0 var(--section-gap)}

/* ---- tool controls (shared by every tool module) ---- */
.lae-tools-scope .lae-tool-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:start}
.lae-tools-scope .lae-tool-field{display:grid;gap:6px;margin:0 0 18px}
.lae-tools-scope .lae-tool-field label{font-size:var(--fs-sm);font-weight:700;color:var(--color-heading)}
.lae-tools-scope .lae-tool-input,.lae-tools-scope .lae-tool-select{width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background-color:var(--soft);outline:0;font:inherit;font-size:16px;color:var(--color-heading)}
.lae-tools-scope .lae-tool-select{padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--color-body) 50%),linear-gradient(135deg,var(--color-body) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;-webkit-appearance:none;appearance:none}
.lae-tools-scope .lae-tool-input:focus,.lae-tools-scope .lae-tool-select:focus{border-color:var(--color-main);background-color:var(--paper)}
.lae-tools-scope .lae-tool-input:focus-visible,.lae-tools-scope .lae-tool-select:focus-visible{outline:2px solid var(--color-main);outline-offset:2px}
.lae-tools-scope .lae-tool-input[aria-invalid=true]{border-color:var(--error-text)}
.lae-tools-scope .lae-tool-hint{margin:0;font-size:var(--fs-xs);color:var(--color-body)}
.lae-tools-scope .lae-tool-error{margin:0;font-size:var(--fs-xs);font-weight:700;color:var(--error-text)}
.lae-tools-scope .lae-tool-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.lae-tools-scope .lae-tool-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}
.lae-tools-scope .lae-tool-stat{padding:16px;border-radius:var(--radius-sm);background:var(--tint-main)}
.lae-tools-scope .lae-tool-stat-label{display:block;margin-bottom:6px;font-size:var(--fs-xs);font-weight:700;color:var(--color-body)}
.lae-tools-scope .lae-tool-stat-value{display:block;font-family:var(--font-heading);font-size:var(--fs-h4);font-weight:700;line-height:1.2;color:var(--color-heading);overflow-wrap:anywhere}
.lae-tools-scope .lae-tool-note{margin:0 0 6px;font-size:var(--fs-xs);color:var(--color-body)}
.lae-tools-scope .lae-tool-sub{margin:28px 0 12px;font-size:var(--fs-h4);line-height:1.3;letter-spacing:0}
.lae-tools-scope .lae-tool-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
.lae-tools-scope .lae-tool-table-wrap:focus-visible{outline:2px solid var(--color-main);outline-offset:2px}
.lae-tools-scope .lae-tool-table{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--fs-sm)}
.lae-tools-scope .lae-tool-table caption{padding:12px 14px;text-align:left;font-weight:700;color:var(--color-heading)}
.lae-tools-scope .lae-tool-table th,.lae-tools-scope .lae-tool-table td{padding:10px 14px;border-top:1px solid var(--line);text-align:right;white-space:nowrap}
.lae-tools-scope .lae-tool-table th:first-child,.lae-tools-scope .lae-tool-table td:first-child{text-align:left;white-space:normal}
.lae-tools-scope .lae-tool-table thead th{background:var(--soft);color:var(--color-heading);font-weight:700}
.lae-tools-scope .lae-tool-table tr.is-selected td,.lae-tools-scope .lae-tool-table tr.is-selected th{background:var(--tint-main);font-weight:700}
.lae-tools-scope .lae-tool-provider{display:block;font-size:var(--fs-2xs);font-weight:400;color:var(--color-body)}
.lae-tools-scope .lae-tool-footnotes{margin:12px 0 0;padding-left:18px;font-size:var(--fs-xs);color:var(--color-body)}

/* ---- ad slot (only printed when switched on in the Customizer) ---- */
.lae-tools-scope .lae-tool-ad{min-height:280px;margin:0 auto var(--section-gap);max-width:760px;text-align:center}
.lae-tools-scope .lae-tool-ad-label{display:block;margin-bottom:6px;font-size:var(--fs-2xs);color:var(--color-body)}

@media(max-width:1024px){
	.lae-tools-scope .lae-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.lae-tools-scope .lae-tool-app{min-height:var(--lae-tool-min-md,560px)}
	.lae-tools-scope .lae-tool-cols{grid-template-columns:1fr;gap:20px}
}
@media(max-width:640px){
	.lae-tools-scope .lae-tool-grid{grid-template-columns:1fr;gap:22px}
	.lae-tools-scope .lae-tool-app{min-height:var(--lae-tool-min-sm,640px);padding:18px}
	.lae-tools-scope .lae-tool-stats{grid-template-columns:1fr}
	.lae-tools-scope .lae-tool-filters select,.lae-tools-scope .lae-tool-filters input[type=search]{flex:1 1 100%}
	.lae-tools-scope .lae-tool-actions .lae-btn{flex:1 1 140px}
}
@media(max-width:480px){
	.lae-tools-scope .lae-tool-app{min-height:var(--lae-tool-min-xs,700px)}
}
@media(prefers-reduced-motion:reduce){
	.lae-tools-scope .lae-tool-thumb img,.lae-tools-scope .lae-tool-card-title a{transition:none}
	.lae-tools-scope .lae-tool-card:hover .lae-tool-thumb img{transform:none}
}
/* Advanced workspace */
.lae-advanced-workspace{margin-top:28px;padding:22px;border:1px solid var(--line,#ddd);border-radius:14px;background:var(--soft,#f8fafc)}
.lae-advanced-workspace h3{margin:0 0 8px;font-size:1.2rem}
.lae-advanced-workspace p{margin:0 0 12px;font-size:.9rem}
.lae-advanced-actions{display:flex;flex-wrap:wrap;gap:10px}
.lae-advanced-actions button{font-size:.88rem;min-height:40px}
@media(max-width:600px){.lae-advanced-workspace{padding:16px}.lae-advanced-actions button{width:100%}}


/* Tools hub visual alignment with the main Blog page (v3.25).
   Only the Tools listing is affected; tool workspaces remain unchanged. */
.lae-tool-hub #lae-tool-filters{
  padding:35px;
  gap:16px;
  background:var(--color-main);
  border:1px solid var(--color-main);
  border-radius:16px;
  color:#fff;
}
.lae-tool-hub #lae-tool-filters input[type=search],
.lae-tool-hub #lae-tool-filters select{
  height:44px;
  background-color:#fff;
  border:1px solid rgba(255,255,255,.5);
  border-radius:10px;
  color:var(--color-heading);
}
.lae-tool-hub #lae-tool-filters input[type=search]:focus,
.lae-tool-hub #lae-tool-filters select:focus{
  background-color:#fff;
  border-color:var(--color-button-hover);
  outline:2px solid rgba(255,255,255,.7);
  outline-offset:2px;
}
.lae-tool-hub #lae-tool-grid{
  gap:35px;
  align-items:stretch;
}
.lae-tool-hub #lae-tool-grid .lae-tool-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(19,133,145,.11);
  border-radius:20px;
  background:#fff;
}
.lae-tool-hub #lae-tool-grid .lae-tool-thumb{
  display:block;
  aspect-ratio:16/10;
  border-radius:0;
  overflow:hidden;
}
.lae-tool-hub #lae-tool-grid .lae-tool-card-title{
  margin:18px 22px 8px;
  line-height:1.3;
}
.lae-tool-hub #lae-tool-grid .lae-tool-card-text{
  margin:0 22px 18px;
  flex:1 1 auto;
}
.lae-tool-hub #lae-tool-grid .lae-tool-open{
  margin:0 22px 22px;
  align-self:flex-start;
}
@media(max-width:767px){
  .lae-tool-hub #lae-tool-filters{padding:22px;}
  .lae-tool-hub #lae-tool-grid{gap:24px;}
}

/* Tool filters share the emerald palette with blog filters. */
.lae-tool-hub #lae-tool-filters,.lae-tools-scope .lae-tool-filters{background:#10B981!important;border-color:#10B981!important;}