/* Doplňky ke společnému vzhledu Pomůcek. */
.calendar-tool .calendar-section + .calendar-section { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--border); }
.calendar-tool .calendar-section { scroll-margin-top: 110px; }
.calendar-tool .calendar-intro { margin: 0 0 24px; color: var(--muted); }
.calendar-tool .calendar-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.calendar-tool .field-grid .t-field > label { display: flex; align-items: center; min-height: 44px; }
.calendar-tool .calendar-label-row label { color: var(--green-dark); font-weight: 650; }
.calendar-tool .calendar-today { min-height: 44px; padding: 7px 12px; font-size: 14px; }
.calendar-tool input[type=date] { display: block; min-width: 0; max-width: 100%; }
.calendar-tool .calendar-shifts { margin-top: 18px; }
.calendar-tool .calendar-shifts .button { min-height: 44px; padding: 8px 14px; }
.calendar-tool .calendar-shifts-label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--muted); }
.calendar-tool .calendar-shifts .tool-actions { margin-top: 0; gap: 8px; }
.calendar-tool .calendar-result { font-variant-numeric: tabular-nums; }
.calendar-tool .calendar-result p { margin: 12px 0 0; }
.calendar-tool .calendar-result .calendar-period { font-size: 14px; }
.calendar-tool .calendar-breakdown { margin: 18px 0 0; }
.calendar-tool .calendar-breakdown dt { font-size: 14px; color: var(--muted); }
.calendar-tool .calendar-breakdown dd { margin: 4px 0 0; font-weight: 650; color: var(--green-dark); }
.calendar-tool .calendar-breakdown > div + div { margin-top: 16px; }
.calendar-tool .age-components { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.calendar-tool .age-components dt { font-size: 14px; color: var(--muted); }
.calendar-tool .age-components dd { margin: 6px 0 0; }
.calendar-tool .age-components output { display: block; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.3; color: var(--green-dark); font-weight: 750; overflow-wrap: anywhere; }
.calendar-tool .calendar-note { margin-top: 24px; color: var(--muted); font-size: 14px; }
.calendar-examples { margin: 22px 0; padding-left: 22px; }
.calendar-examples li + li { margin-top: 12px; }
.calendar-formula { padding: 18px 22px; margin: 22px 0; border-left: 4px solid var(--green); background: var(--green-soft); border-radius: 0 12px 12px 0; overflow-wrap: anywhere; }
.calendar-formula p { margin: 0; }
.calendar-formula p + p { margin-top: 12px; }
.calendar-reference a { text-underline-offset: 4px; }
.calendar-reference a:hover, .calendar-reference a:focus-visible { color: var(--gold-text); }
@media (max-width: 540px) {
  .calendar-tool .calendar-section + .calendar-section { margin-top: 30px; padding-top: 28px; }
  .calendar-tool .age-components { gap: 8px; }
  .calendar-tool .calendar-shifts .tool-actions { flex-direction: row; }
  .calendar-tool .calendar-shifts .button { flex: 1 1 calc(33.333% - 8px); }
}
@media (max-width: 360px) {
  .calendar-tool .age-components { grid-template-columns: 1fr; }
  .calendar-tool .age-components > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .calendar-tool .age-components dd { margin: 0; }
}