/* =========================
   Epoch tool (scoped)
   ========================= */

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

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

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

:where(body.tk[data-tool="epoch"]) .cardtop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

:where(body.tk[data-tool="epoch"]) .copybtn{
  width: auto;
  padding: 6px 10px;
  font-size: 12px;
}

/* Epoch: output fields look like read-only panels */
:where(body.tk[data-tool="epoch"]) .epoch-out{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.65);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  overflow: auto;
}

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

/* Epoch result cards (scoped) */
:where(body.tk[data-tool="epoch"]) .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="epoch"]) .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="epoch"]) .nowcard .tz{ font-weight: 800; }
:where(body.tk[data-tool="epoch"]) .nowcard .t{ font-size: 18px; margin-top: 6px; }