/* =========================
   Date Diff tool (scoped)
   ========================= */

:where(body.tk[data-tool="date-diff"]) .dd-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 160px;
  gap: 16px;
  align-items: start;
}

:where(body.tk[data-tool="date-diff"]) .end-date-control{
  display: flex;
  gap: 10px;
  align-items: end;
}
:where(body.tk[data-tool="date-diff"]) .end-date-control input{
  flex: 1;
}
:where(body.tk[data-tool="date-diff"]) .end-date-control button{
  flex-shrink: 0;
  width: auto;
}

:where(body.tk[data-tool="date-diff"]) .dd-col{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

:where(body.tk[data-tool="date-diff"]) .dd-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 22px;
}

@media (max-width: 820px) {
  :where(body.tk[data-tool="date-diff"]) .dd-grid{ grid-template-columns: 1fr; }
  :where(body.tk[data-tool="date-diff"]) .dd-actions{ flex-direction: row; padding-top: 0; }
}

@media (max-width: 640px) {
  :where(body.tk[data-tool="date-diff"]) .end-date-control{
    flex-direction: column;
    gap: 6px;
  }
  :where(body.tk[data-tool="date-diff"]) .end-date-control button{
    width: 100%;
  }
}

:where(body.tk[data-tool="date-diff"]) .results-wrap{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:where(body.tk[data-tool="date-diff"]) .results-skeleton{
  display: none;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

:where(body.tk[data-tool="date-diff"]) .results-skeleton .skeleton-card{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(17,24,39,0.04), rgba(17,24,39,0.08));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

:where(body.tk[data-tool="date-diff"]) .skeleton-line{
  display: block;
  width: 70%;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
}
:where(body.tk[data-tool="date-diff"]) .skeleton-line.tall{
  height: 18px;
  width: 50%;
}

:where(body.tk[data-tool="date-diff"]) .results-wrap.show-skeleton .results-skeleton{
  display: grid;
}

/* Date Diff result cards (scoped) */
:where(body.tk[data-tool="date-diff"]) .nowcard{
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(17,24,39,0.04),
    0 10px 30px rgba(17,24,39,0.08);
  transition:
    transform 180ms ease-out,
    box-shadow 180ms ease-out,
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    color 180ms ease-out;
}
:where(body.tk[data-tool="date-diff"]) .nowcard:hover{
  transform: translateY(-2px);
  box-shadow:
    0 4px 10px rgba(17,24,39,0.06),
    0 16px 40px rgba(17,24,39,0.10);
}
:where(body.tk[data-tool="date-diff"]) .nowcard .tz{ font-weight: 800; }