/* date-calc: mode switch, date and amount fields, result line and definition list. */
.dc-group[hidden] { display: none; }
.dc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--matrix-space-12) var(--matrix-space-16); align-items: end; margin-bottom: var(--matrix-space-12); }
.dc-row--amounts { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.dc-field { display: grid; gap: var(--matrix-space-8); min-width: 0; }
.dc-field label { font-weight: 600; }
.dc-field input, .dc-field select { width: 100%; box-sizing: border-box; }
.matrix-ui .dc-num { font-family: var(--matrix-font-mono); }
.dc-error { margin: 0; font-size: var(--matrix-type-caption); }
.dc-error:empty { display: none; }
.dc-line { font-size: 1.35rem; overflow-wrap: anywhere; }
/* a label takes the width it needs up to half the list and wraps beyond it, so a long one ("Working days (Mon to Fri, without
   Singapore's public holidays)") never pushes the list past the page (hub review Rdd8f3e79 V1, I0ab2fc18: overflow at 481 px) */
.dc-details { display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr); gap: 4px var(--matrix-space-16); margin: 0 0 var(--matrix-space-12); }
.dc-details dt { color: var(--matrix-muted); overflow-wrap: anywhere; }
.dc-details dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .dc-details { grid-template-columns: 1fr; gap: 0; }
  .dc-details dd { margin-bottom: var(--matrix-space-8); }
}
/* On a wide screen the result stands beside the dates, so the whole of it is in view at 900 px high (Jack's review of 2026-10-12,
   appendix 41b: below the dates only its top showed); narrower screens keep one column. */
@media (min-width: 1100px) {
  body[data-tool="date-calc"] #tool { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); column-gap: var(--matrix-space-24); align-items: start; }
  body[data-tool="date-calc"] #tool > * { grid-column: 1; min-width: 0; }
  body[data-tool="date-calc"] #tool > #tool-heading { grid-column: 1 / -1; }
  body[data-tool="date-calc"] #tool > #result { grid-column: 2; grid-row: 2 / span 5; margin-top: 0; }
}
/* the holiday box beside its whole label in the narrower column */
.dc-sg { flex-wrap: nowrap; align-items: flex-start; }
.dc-sg label { flex: 1 1 auto; min-width: 0; }

.dc-holidays summary { cursor: pointer; color: var(--matrix-text); }
.dc-holidays[open] summary { margin-bottom: var(--matrix-space-8); }