/* Tools4Ease - interactive blog modules
   Shares the tokens defined in t4e-design.css. */

.t4e-mod{
  font-family:var(--t4e-font-body);color:var(--t4e-text-body);
  border:1px solid var(--t4e-border-faint);border-radius:var(--t4e-radius-card);
  background:var(--t4e-surface-page);overflow:hidden;margin:0;
}
.t4e-mod *{box-sizing:border-box}
.t4e-mod-head{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid var(--t4e-border-faint);
  background:var(--t4e-surface-subtle);
}
.t4e-mod-title{
  font-family:var(--t4e-font-display);font-size:var(--t4e-text-subtitle);
  font-weight:var(--t4e-weight-emphasis);color:var(--t4e-text-strong);
  letter-spacing:var(--t4e-tracking-tight);line-height:var(--t4e-leading-ui);margin:0;
}
.t4e-mod-note{font-family:var(--t4e-font-mono);font-size:var(--t4e-text-caption);color:var(--t4e-text-muted)}
.t4e-mod-body{padding:24px}
.t4e-mod-foot{
  padding:14px 24px;border-top:1px solid var(--t4e-border-faint);
  background:var(--t4e-surface-subtle);font-size:var(--t4e-text-small);color:var(--t4e-text-muted);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;
}

/* Filter chips */
.t4e-chips{display:flex;flex-wrap:wrap;gap:8px}
.t4e-chip{
  appearance:none;cursor:pointer;font:inherit;
  font-size:var(--t4e-text-small);font-weight:var(--t4e-weight-emphasis);
  padding:8px 14px;border-radius:var(--t4e-radius-pill);
  border:1px solid var(--t4e-border-mid);background:var(--t4e-white);color:var(--t4e-text-strong);
  transition:background var(--t4e-duration) var(--t4e-easing),color var(--t4e-duration) var(--t4e-easing);
}
.t4e-chip:hover{background:var(--t4e-blue-100)}
.t4e-chip[aria-pressed="true"]{background:var(--t4e-navy-800);border-color:var(--t4e-navy-800);color:#fff}
.t4e-chip:focus-visible{outline:2px solid var(--t4e-navy-900);outline-offset:2px}

/* Search */
.t4e-search{position:relative;flex:1 1 200px;max-width:280px}
.t4e-search input{
  width:100%;font:inherit;font-size:var(--t4e-text-small);
  padding:9px 12px 9px 34px;border-radius:var(--t4e-radius-control);
  border:1px solid var(--t4e-border-mid);background:var(--t4e-white);color:var(--t4e-text-strong);
}
.t4e-search input:focus{outline:2px solid var(--t4e-navy-900);outline-offset:2px;border-color:var(--t4e-navy-800)}
.t4e-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--t4e-text-muted)}

/* Ranked tool cards */
.t4e-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.t4e-card2{
  position:relative;display:flex;flex-direction:column;gap:8px;
  padding:18px 18px 16px;border:1px solid var(--t4e-border-faint);
  border-radius:var(--t4e-radius-block);background:var(--t4e-white);
  text-decoration:none;color:inherit;
  transition:border-color var(--t4e-duration) var(--t4e-easing),background var(--t4e-duration) var(--t4e-easing);
}
.t4e-card2:hover{border-color:var(--t4e-navy-800);background:var(--t4e-blue-050)}
.t4e-card2:focus-visible{outline:2px solid var(--t4e-navy-900);outline-offset:2px}
.t4e-rank{
  position:absolute;top:14px;right:14px;
  font-family:var(--t4e-font-mono);font-size:var(--t4e-text-caption);
  color:var(--t4e-text-muted);letter-spacing:.04em;
}
.t4e-card2-name{
  font-family:var(--t4e-font-display);font-size:1.0625rem;font-weight:var(--t4e-weight-emphasis);
  color:var(--t4e-text-strong);letter-spacing:var(--t4e-tracking-tight);line-height:var(--t4e-leading-ui);
  margin:0;padding-right:34px;
}
.t4e-card2-desc{font-size:var(--t4e-text-base);line-height:var(--t4e-leading-prose);margin:0;color:var(--t4e-text-body)}
.t4e-card2-why{
  font-size:var(--t4e-text-small);line-height:1.45;margin:0;color:var(--t4e-text-muted);
  padding-top:8px;border-top:1px dashed var(--t4e-border-faint);
}
.t4e-card2-tag{
  align-self:flex-start;font-size:var(--t4e-text-overline);font-weight:var(--t4e-weight-emphasis);
  text-transform:uppercase;letter-spacing:var(--t4e-tracking-overline);
  color:var(--t4e-navy-500);background:var(--t4e-blue-100);
  padding:3px 8px;border-radius:var(--t4e-radius-pill);
}
.t4e-card2-go{
  margin-top:auto;padding-top:10px;font-size:var(--t4e-text-small);
  font-weight:var(--t4e-weight-emphasis);color:var(--t4e-navy-800);
}
.t4e-card2:hover .t4e-card2-go{text-decoration:underline}
.t4e-empty{
  grid-column:1/-1;text-align:center;padding:32px 16px;
  color:var(--t4e-text-muted);font-size:var(--t4e-text-base);
}
.t4e-count{font-family:var(--t4e-font-mono);font-size:var(--t4e-text-caption);color:var(--t4e-text-muted)}
/* Question / answer picker */
.t4e-q{margin:0 0 20px}
.t4e-q:last-of-type{margin-bottom:0}
.t4e-q-label{display:block;font-family:var(--t4e-font-display);font-size:1rem;font-weight:var(--t4e-weight-emphasis);color:var(--t4e-text-strong);margin:0 0 4px}
.t4e-q-help{display:block;font-size:var(--t4e-text-small);color:var(--t4e-text-muted);margin:0 0 10px}
.t4e-opts{display:flex;flex-wrap:wrap;gap:8px}
.t4e-opt{appearance:none;cursor:pointer;font:inherit;text-align:left;font-size:var(--t4e-text-base);padding:10px 14px;border:1px solid var(--t4e-border-mid);border-radius:var(--t4e-radius-control);background:var(--t4e-white);color:var(--t4e-text-strong);transition:background var(--t4e-duration) var(--t4e-easing),border-color var(--t4e-duration) var(--t4e-easing)}
.t4e-opt:hover{background:var(--t4e-blue-050);border-color:var(--t4e-navy-300)}
.t4e-opt[aria-pressed=true]{background:var(--t4e-navy-800);border-color:var(--t4e-navy-800);color:#fff}
.t4e-opt:focus-visible{outline:2px solid var(--t4e-navy-900);outline-offset:2px}

/* Result panel */
.t4e-result{margin-top:22px;padding:20px;border-radius:var(--t4e-radius-block);background:var(--t4e-surface-inverse);color:var(--t4e-text-inverse)}
.t4e-result[hidden]{display:none}
.t4e-result-kicker{font-size:var(--t4e-text-overline);text-transform:uppercase;letter-spacing:var(--t4e-tracking-overline);font-weight:var(--t4e-weight-emphasis);color:var(--t4e-blue-400);margin:0 0 6px}
.t4e-result-h{font-family:var(--t4e-font-display);font-size:1.5rem;font-weight:var(--t4e-weight-emphasis);letter-spacing:var(--t4e-tracking-tight);line-height:var(--t4e-leading-ui);margin:0 0 8px;color:#fff}
.t4e-result-p{font-size:var(--t4e-text-body-lg);line-height:var(--t4e-leading-prose);margin:0;color:rgba(255,255,255,.86)}
.t4e-result-p + .t4e-result-p{margin-top:8px}
.t4e-result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.t4e-result-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:var(--t4e-text-base);font-weight:var(--t4e-weight-emphasis);padding:10px 18px;border-radius:var(--t4e-radius-control);background:#fff;color:var(--t4e-navy-800);border:1px solid #fff}
.t4e-result-btn:hover{background:var(--t4e-blue-100)}
.t4e-result-btn--ghost{background:transparent;color:#fff;border-color:var(--t4e-border-inverse)}
.t4e-result-btn--ghost:hover{background:var(--t4e-overlay-inverse)}
/* Spec readout, used by the upload-target helper */
.t4e-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:18px}
.t4e-spec{padding:14px 16px;border:1px solid var(--t4e-border-faint);border-radius:var(--t4e-radius-block);background:var(--t4e-surface-subtle)}
.t4e-spec-k{display:block;font-size:var(--t4e-text-overline);text-transform:uppercase;letter-spacing:var(--t4e-tracking-overline);font-weight:var(--t4e-weight-emphasis);color:var(--t4e-text-muted);margin-bottom:4px}
.t4e-spec-v{display:block;font-family:var(--t4e-font-display);font-size:1.25rem;font-weight:var(--t4e-weight-emphasis);color:var(--t4e-text-strong);letter-spacing:var(--t4e-tracking-tight);line-height:1.15}
.t4e-spec-v small{display:block;font-family:var(--t4e-font-body);font-size:var(--t4e-text-small);font-weight:400;color:var(--t4e-text-muted);margin-top:3px;letter-spacing:0}

/* Inline calculator row */
.t4e-calc{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:20px;padding-top:20px;border-top:1px solid var(--t4e-border-faint)}
.t4e-field{display:flex;flex-direction:column;gap:5px;flex:1 1 130px}
.t4e-field label{font-size:var(--t4e-text-small);font-weight:var(--t4e-weight-emphasis);color:var(--t4e-text-strong)}
.t4e-field input,.t4e-field select{font:inherit;font-size:var(--t4e-text-base);padding:9px 11px;border:1px solid var(--t4e-border-mid);border-radius:var(--t4e-radius-control);background:var(--t4e-white);color:var(--t4e-text-strong);width:100%}
.t4e-field input:focus,.t4e-field select:focus{outline:2px solid var(--t4e-navy-900);outline-offset:2px;border-color:var(--t4e-navy-800)}
.t4e-verdict{flex:1 1 100%;font-size:var(--t4e-text-base);line-height:var(--t4e-leading-prose);color:var(--t4e-text-body);margin:0}
.t4e-verdict strong{color:var(--t4e-text-strong)}
.t4e-bar{height:8px;border-radius:var(--t4e-radius-pill);background:var(--t4e-blue-100);overflow:hidden;margin-top:8px;flex:1 1 100%}
.t4e-bar span{display:block;height:100%;background:var(--t4e-navy-800);border-radius:var(--t4e-radius-pill);width:0;transition:width 400ms var(--t4e-easing)}

/* Comparison table */
.t4e-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.t4e-table{width:100%;border-collapse:collapse;font-size:var(--t4e-text-base);min-width:520px}
.t4e-table th,.t4e-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--t4e-border-faint);vertical-align:top}
.t4e-table th{font-family:var(--t4e-font-display);font-size:var(--t4e-text-small);font-weight:var(--t4e-weight-emphasis);color:var(--t4e-text-strong);text-transform:uppercase;letter-spacing:var(--t4e-tracking-overline);background:var(--t4e-surface-subtle)}
.t4e-table td{color:var(--t4e-text-body)}
.t4e-table tr:last-child td{border-bottom:0}
.t4e-table td:first-child{font-weight:var(--t4e-weight-emphasis);color:var(--t4e-text-strong)}

@media (max-width:640px){
  .t4e-mod-head,.t4e-mod-body{padding:16px}
  .t4e-mod-foot{padding:12px 16px}
  .t4e-cards{grid-template-columns:1fr}
}
/* The action cell holds links rather than a figure, so it drops to body size. */
.t4e-spec-v.t4e-out-do{font-family:var(--t4e-font-body);font-size:var(--t4e-text-body-lg);font-weight:var(--t4e-weight-emphasis);line-height:1.4;letter-spacing:0}
.t4e-spec-v.t4e-out-do a{text-decoration:underline;text-underline-offset:2px}

/* Astra uppercases every button on the site. These are controls inside an
   article, so they keep sentence case and normal tracking. */
.t4e-mod button,.t4e-chip,.t4e-opt{text-transform:none!important;letter-spacing:0!important;font-family:var(--t4e-font-body)!important}