/* =========================
   DST Planner (scoped)
   ========================= */

:where(body.tk[data-tool="dst-planner"]) .dst-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 var(--wrap-pad) var(--wrap-pad);
}

:where(body.tk[data-tool="dst-planner"]) .dst-card{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.65);
}

:where(body.tk[data-tool="dst-planner"]) .dst-card h3{ margin: 4px 0 8px; }
:where(body.tk[data-tool="dst-planner"]) .dst-row{ display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }

/* Results table */
:where(body.tk[data-tool="dst-planner"]) .tablewrap{
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,0.65);
}

:where(body.tk[data-tool="dst-planner"]) .dsttable{
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

:where(body.tk[data-tool="dst-planner"]) .dsttable th,
:where(body.tk[data-tool="dst-planner"]) .dsttable td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

:where(body.tk[data-tool="dst-planner"]) .dsttable th{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.90);
  text-align: left;
  font-weight: 900;
}

:where(body.tk[data-tool="dst-planner"]) .dsttable tr:nth-child(even) td{
  background: rgba(17,24,39,0.02);
}

:where(body.tk[data-tool="dst-planner"]) .dsttable tr:hover td{
  background: rgba(91,42,166,0.06);
}

@media (max-width: 720px) {:where(body.tk[data-tool="dst-planner"]) .dst-grid{ grid-template-columns: 1fr; }}

/* Visual uplift (scoped) */
:where(body.tk[data-tool="dst-planner"]) .dst-card{
  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="dst-planner"]) .dst-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 4px 10px rgba(17,24,39,0.06),
    0 16px 40px rgba(17,24,39,0.10);
}