/* Shared layout for calendar converters and the standalone date difference tool. */
.dt-tool { max-width: 720px; }
.dt-title { font-size: var(--text-xl); margin: 0 0 var(--space-6); }
.dt-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.dt-heading .dt-title { margin: 0; min-width: 0; }
.dt-heading > .btn { margin-left: auto; flex-shrink: 0; }
.birth-fields { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-3); }
.birth-age { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.birth-age dt { font-size: var(--text-sm); color: var(--color-muted); }
.birth-age dd { margin: var(--space-2) 0 0; font-size: var(--text-xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dt-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.dt-date-column { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.dt-date-row { display: flex; align-items: stretch; gap: var(--space-2); }
.dt-date-row .field { min-width: 0; flex: 1; }
.dt-date-row > .btn { height: auto; flex-shrink: 0; }
.dt-hijri { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr) minmax(0, 1.25fr); gap: var(--space-3); }
.dt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.dt-result { padding: var(--space-6); margin-top: var(--space-6); background: var(--color-field); border-radius: var(--radius-xl); }
.dt-result-label { font-size: var(--text-sm); color: var(--color-muted); }
.dt-result-value { display: block; margin-top: var(--space-2); font-size: var(--text-2xl); line-height: 1.25; overflow-wrap: anywhere; font-weight: var(--weight-bold); }
.dt-result-sub { margin-top: var(--space-2); font-size: var(--text-md); color: var(--color-muted); }
.dt-facts { margin: var(--space-4) 0 0; }
.dt-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
.dt-facts dt { color: var(--color-muted); font-size: var(--text-sm); }
.dt-facts dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; font-size: var(--text-md); }
.dt-note { margin-top: var(--space-4); }
.dt-status { margin-block: var(--space-3) 0; }
.dt-tool [aria-invalid="true"] { color: var(--color-danger); }
.dt-tool input[type="date"] { min-width: 0; width: 100%; }
@media (max-width: 480px) {
  .birth-age { grid-template-columns: minmax(0, 1fr); }
  .dt-fields { grid-template-columns: minmax(0, 1fr); }
  .dt-hijri { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dt-hijri-month { grid-column: 1 / -1; grid-row: 1; }
  .dt-result { padding: var(--space-4); }
  .dt-result-value { font-size: var(--text-xl); }
  .dt-facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}